تحويل SVG إلى خلفية CSS
الصق ملف SVG واحصل مباشرة على قاعدة CSS من نوع background-image جاهزة للصق في ورقة الأنماط، دون الحاجة إلى استضافة ملف صورة منفصل.
لماذا نستخدم SVG كخلفية CSS بدل ملف صورة؟
يؤدي ترميز SVG مباشرة داخل ورقة الأنماط على شكل data URI إلى تجنّب طلب HTTP إضافي لتحميل ملف صورة منفصل، مما قد يسرّع العرض قليلًا للأيقونات الصغيرة. وهو عملي أيضًا للمكوّنات المستقلة (ملف CSS واحد يحتوي أيقونته بالفعل).
لماذا يُرمَّز SVG بترميز URL بدل base64؟
ينتج ترميز URL (مع تهريب بعض المحارف مثل # و< و>) عادةً data URI أقصر وأوضح من base64 للنصوص مثل SVG، مما يقلّل حجم ملف CSS النهائي قليلًا.
هل يمكنني تغيير لون الأيقونة بعد تضمينها كخلفية CSS؟
لا، فبعد ترميزها في background-image يصبح لون SVG ثابتًا داخل data URI: لتغيير اللون، عدّله في SVG المصدر قبل إعادة توليد CSS (مثلًا باستخدام أداة استبدال لون SVG لدينا).
معالجة محلية 100%: يجري الترميز بالكامل داخل متصفحك، ولا يُرسَل ملف SVG الخاص بك أبدًا إلى أي خادم.