محوّل SVG إلى URI بيانات CSS
الصق ترميز SVG خامًا للحصول على URI بيانات مُرمَّز بالنسبة المئوية جاهز للإدراج مباشرة في خاصية background-image في CSS، بالإضافة إلى معاينة حية لصورة SVG المعروضة.
معاينة مباشرة
ستظهر معاينة SVG هنا
عنوان URI للبيانات
مقتطف CSS
الأسئلة الشائعة
لماذا أستخدم URI بيانات بدلاً من ملف SVG خارجي؟
يُضمّن URI البيانات صورة SVG مباشرة داخل CSS أو HTML، موفرًا طلب HTTP إضافيًا. مفيد بشكل خاص للأيقونات الصغيرة المستخدمة كخلفية فقط، حيث يكون الاحتفاظ بكل شيء في ورقة أنماط واحدة أبسط من إدارة ملف أصول منفصل.
لماذا يُرمَّز بالنسبة المئوية بدلاً من base64؟
عادةً ما تكون URI بيانات SVG المُرمَّزة بالنسبة المئوية أصغر من مكافئها بترميز base64 وتبقى قابلة للقراءة البشرية، مما يجعلها أسهل للمراجعة أو التعديل مباشرة في CSS. تدعم المتصفحات كلا الخيارين، وتستخدم هذه الأداة الخيار الأكثر إحكامًا ووضوحًا.
هل من الآمن لصق SVG من مصدر غير موثوق؟
تعرض المعاينة صورة SVG الخاصة بك كعنصر '<img>'، وليست مُدرجة كـHTML نشط، لذا لن تُنفَّذ النصوص البرمجية المضمّنة داخل SVG ضار في المعاينة. مع ذلك، تعامل مع ملفات SVG مثل أي ملف آخر، والصق فقط الترميز الذي تثق به.