مقالات وأدلة

الفرق بين SVG و PNG: أي صيغة يجب أن تستخدم؟

استخدم صيغة SVG لأيقونات المواقع والشعارات وواجهات المستخدم لأنها تحافظ على دقتها العالية في جميع الشاشات. واستخدم صيغة PNG عندما تحتاج إلى صورة ثابتة الأبعاد للبريد الإلكتروني أو التطبيقات القديمة.

كيفية تحريك أيقونات SVG باستخدام CSS

أضف كلاس CSS إلى عنصر SVG المضمن واستخدم حركات transform أو stroke-dasharray. يمكنك اختيار حركة جاهزة مثل الدوران أو النبض من المحرر المباشر ونسخ الكود فوراً.

كيفية تعديل أيقونات SVG في فيجما أو المتصفح

انسخ كود SVG مباشرة من موقعنا والصقه داخل لوحة العمل في برنامج Figma لتعديل المسارات والألوان. أو افتح الأيقونة في استوديو المتجهات لتعديلها مباشرة في متصفحك بدون برامج.

كيفية استخدام أيقونات SVG في React و Next.js و Vue

اختر تبويب React TSX أو Vue 3 في صفحة أي أيقونة لنسخ المكون الجاهز. يدعم الكود خاصية currentColor ليتطابق لون الأيقونة تلقائياً مع لون النص في Tailwind CSS.

SVG المدمج مقابل وسم الصورة

استخدم SVG المدمج أو المكونات عندما تحتاج لتغيير اللون عند المرور والحركة بـ CSS. واستخدم وسم الصورة مع العرض والارتفاع والنص البديل عندما تريد فهرسة الأيقونة في بحث الصور.

تفادي تعارض معرّفات التدرجات والقص

تعيد المجموعات متعددة الألوان استخدام معرّفات داخلية مثل paint0_linear. وإذا تشابه معرّفان في صفحة واحدة، يُرسم التدرج الخطأ. لذلك يعطي SVG Nexus كل معرّف داخلي نطاقاً خاصاً لكل أيقونة.

أيقونات يسهل الوصول إليها وعكس الاتجاه

أخفِ الأيقونات الزخرفية بـ aria-hidden و focusable false. وأعطِ أزرار الأيقونة وحدها aria-label واضحاً. واعكس الأسهم أفقياً في اللغات التي تُكتب من اليمين إلى اليسار.

تنقية ملفات SVG الخارجية

صيغة SVG هي XML، لذا يمكن للملفات غير الموثوقة أن تحمل سكربتات ومعالجات أحداث. أزل وسوم السكربت وقدّم ملفات SVG بسياسة أمان محتوى صارمة وترويسة nosniff.