كيف يعمل
يحوّل شيفرة SVG إلى Data URI جاهز للاستخدام في CSS، بحيث يمكنك تضمين الأيقونة مباشرةً في ورقة الأنماط دون ملف منفصل أو طلب HTTP إضافي.
يوفّر ترميزين: URL-encoded (الترميز بالنسبة المئوية)، أقصر وأكثر قابلية للقراءة، ويُوصى به لـ SVG؛ وBase64، أطول قليلًا لكنه متوافق عالميًا.
يمكن توليد النتيجة كـ background-image أو كـ mask-image (لتلوين الأيقونة بـ CSS) أو كمتغير CSS قابل لإعادة الاستخدام. وتصغير SVG مسبقًا يقلّل الحجم أكثر.
أمثلة
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">…</svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'…%3C/svg%3E");يُبقي ترميز URL شيفرة SVG شبه مقروءة وعادةً ما يكون أقصر من Base64.-webkit-mask-image: url("data:image/svg+xml,…");
mask-image: url("data:image/svg+xml,…");كـ mask-image، يُتحكَّم في لون الأيقونة عبر خاصية background-color للعنصر.حالات الاستخدام
- تضمين أيقونات SVG كـ background-image دون إضافة طلبات HTTP إلى الصفحة.
- استخدام SVG كقناع (mask-image) لإعادة تلوينه من CSS حسب السمة أو الحالة.
- تخزين أيقونة في متغير CSS وإعادة استخدامها في عدة محدِّدات.
- تقليل حجم الأيقونات المضمّنة بتصغير SVG قبل تضمينه.
الأسئلة الشائعة
أيهما أفضل: URL-encoded أم Base64؟
بالنسبة إلى SVG، عادةً ما يكون URL-encoded الخيار الأفضل: فهو ينتج Data URI أقصر وأكثر قابلية للقراءة لأن SVG نص. أما Base64 فيمنح أقصى توافق لكنه يزيد الحجم بنحو 33%.
لماذا نستخدم mask-image بدل background-image؟
مع background-image تحتفظ الأيقونة بألوانها الأصلية. ومع mask-image يحدّد SVG الشكل فقط ويوفّر CSS اللون، وهو مثالي للأيقونات أحادية اللون التي تتغيّر مع السمة.
ماذا يفعل خيار التصغير؟
يزيل التعليقات ويقلّص المسافات البيضاء في SVG قبل ترميزه، فيصبح Data URI النهائي أصغر دون تغيير الرسم.
هل يُرفَع SVG الخاص بي إلى خادم؟
لا. يتم التحويل بالكامل في متصفحك؛ ولا يغادر SVG حاسوبك أبدًا.