UTILS.
‎100%‎ داخل المتصفح
🖼️

مُرمِّز SVG إلى CSS / Data-URI

رمّز شفرة SVG كـ data URI مُرمَّز بالـ URL أو base64، مع أسطر background-image لـ CSS و<img> جاهزة للصق. تصغير اختياري.

— يظهر المخرج هنا —
— يظهر المخرج هنا —
— يظهر المخرج هنا —

حول هذه الأداة

الصق شفرة SVG خام واحصل على data URI يمكنك وضعه مباشرةً في CSS أو HTML. تُنتج الأداة ترميزين، ويُولَّد كل شيء في متصفحك، فلا يُرفع أي شيء.

يستبدل الناتج المُرمَّز بالـ URL علامات الاقتباس المزدوجة بمفردة، ويشغّل encodeURIComponent، ثم يستعيد بعض المحارف الآمنة (المسافة والنقطتين والشرطة المائلة وعلامة يساوي) لإبقائه مضغوطًا ومقروءًا. أما ناتج base64 فيُرمِّز الـ SVG بترميز UTF-8 ويمرّره عبر btoa، معطيًا data:image/svg+xml;base64,… . وتُظهر مقارنة بالبايت أي الترميزين أصغر؛ ولمعظم الأيقونات تفوز الصيغة المُرمَّزة بالـ URL.

فعّل التصغير لإزالة التعليقات وطيّ المسافات البيضاء بين الوسوم قبل الترميز. انسخ سطر background-image لـ CSS أو سطر <img src> لـ HTML. لاحظ أن علامات الاقتباس داخل الـ SVG تُطبَّع إلى مفردة كي يمكن تغليف الـ data URI بعلامات اقتباس مزدوجة بأمان.

الأسئلة الشائعة

مُرمَّز بالـ URL أم base64 — أيهما أستخدم؟
المُرمَّز بالـ URL أصغر عادةً ويبقى مقروءًا، ما يساعد في التصحيح. أما base64 فأكثر إبهامًا لكنه مقبول عالميًا؛ تخبرك مقارنة الحجم بأيهما أصغر هنا.
لماذا تحوّلت علامات الاقتباس المزدوجة إلى مفردة؟
تُحوَّل علامات اقتباس السمات إلى مفردة كي يمكن وضع الـ data URI كاملًا داخل url("…") أو src="…" ذات الاقتباس المزدوج دون تهريب. وكلاهما صالح في SVG.
هل يغيّر التصغير مظهر الـ SVG؟
لا. يزيل التعليقات ويطوي المسافات البيضاء بين الوسوم وداخلها فقط؛ والمتجه المُصيَّر مطابق، لكنه أصغر.
هل يُرفع الـ SVG إلى أي مكان؟
لا. يعمل الترميز بالكامل في متصفحك باستخدام encodeURIComponent وbtoa؛ ولا تغادر الشفرة جهازك.

المزيد من الأدوات