مشفر URL لـ SVG

قم بتشفير SVG لاستخدامه مع CSS

عرض

علامة الاقتباس الخارجية مفردة علامة الإقتباس الخارجية مزدوجة تجهيز للاستخدام في CSS

النتيجة

تحوّل هذه الأداة كود SVG الخام إلى Data URI مُرمّز يمكن لصقه مباشرة داخل خاصية `background-image` في CSS أو داخل `<img src>` في HTML، دون الحاجة لملف صورة منفصل أو استضافة. طريقة سريعة لتضمين الأيقونات والرسومات الصغيرة مباشرة داخل ورقة التنسيق أو الكود لديك.

الصق كود SVG مثل هذا واحصل على Data URI جاهز للاستخدام:

<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="4"/></svg> → data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...%3E

لماذا نُرمّز SVG بدلًا من الربط بالملف مباشرة؟

يتخطى Data URI المضمّن طلب HTTP منفصلًا، وهذا يفيد الأيقونات الصغيرة التي قد تضيف رحلات شبكة إضافية للصفحة لولا ذلك.

هل يغيّر الترميز شكل SVG؟

لا، يغيّر الترميز فقط طريقة تمثيل SVG كنص. الصورة المعروضة مطابقة تمامًا للملف الأصلي.

هل يمكن استخدام الناتج مباشرة في CSS؟

نعم، النص المُرمّز جاهز للصقه داخل `()url` ضمن خاصية `background-image` أو `content` في CSS.

هل يوجد حد لحجم الترميز؟

تعمل ملفات SVG الكبيرة، لكنها تنتج Data URI طويلًا، لذا يُفضّل استخدام هذه الطريقة للأيقونات الصغيرة وليس الرسومات المعقّدة.