طريقة الاستخدام
- أفلت ملف .svg في منطقة الإفلات، أو انقر لاختيار واحد، أو الصق صورة.
- أبقِ «التحويل إلى» على «الصيغة الأصلية» لترميز شيفرة SVG نفسها، أو اختر PNG أو JPEG أو WebP لتحويلها إلى وحدات بكسل.
- إذا حوّلتها إلى صورة نقطية، فحدّد «أقصى عرض» للتحكم في أبعادها بالبكسل.
- انسخ مخرجات CSS background-image لاستخدامها في ورقة أنماط، أو انسخ data URI أو Base64 الخام أو وسم img أو نسخة Markdown.
SVG بصيغة data URI
تصف SVG (Scalable Vector Graphics، ونوع MIME الخاص بها image/svg+xml) الأشكال بنص XML، لذا تبقى حادة الوضوح بأي حجم. وعادةً ما تبدأ سلسلة Base64 الخاصة بها بـ PHN2Zy (الشكل المرمّز لـ <svg) أو PD94bWw عندما يبدأ الملف بتصريح XML.
عند استخدام SVG كصورة، يجب أن يحمل العنصر الجذري السمة xmlns="http://www.w3.org/2000/svg". وكثير من المقتطفات المضمّنة المنسوخة من HTML تفتقر إليها، فلا يعرض data URI عندها أي شيء. كما تُحظر الموارد الخارجية في وضع الصورة، لذا لن تُحمَّل خطوط الويب والصور المرتبطة داخل SVG؛ فحوّل النصوص إلى مسارات أو ضمّن تلك الموارد أولًا.
Base64 أم ترميز URL؟
لأن SVG نص في الأصل، يمكن لـ data URI أن يحمل الشيفرة مباشرة مع ترميز عدد قليل من الأحرف بالنسبة المئوية (< و> و# و% وعلامات الاقتباس). وبالنسبة إلى أيقونة نموذجية في CSS، يكون ذلك أقصر من Base64 وينضغط بشكل أفضل باستخدام gzip. أما Base64 فهو الخيار الأكثر أمانًا عندما تمر السلسلة عبر أنظمة تُفسد علامات الاقتباس أو الأحرف الخاصة، أو عندما تتوقع واجهة API ترميز Base64.
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* مرمّز بالنسبة المئوية */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");لإنشاء الصيغة المرمّزة بالنسبة المئوية، استخدم مولّد Data URI واختر «ترميز النسبة المئوية».
نقِّ ملفات SVG غير الموثوقة
يمكن أن تحتوي SVG على عناصر <script>، وسمات معالجة الأحداث مثل onload، وروابط إلى مستندات أخرى. ولا تشغّل المتصفحات النصوص البرمجية في SVG المعروضة عبر <img> أو خلفية CSS، لكن الملف نفسه إذا ضُمِّن في HTML أو فُتح بمفرده يمكنه تشغيلها. فإذا كان المستخدمون يستطيعون رفع ملفات SVG إلى تطبيقك، فنقِّها، باستخدام DOMPurify مثلًا، قبل تخزينها أو تضمينها. فـ Base64 لا يفعل أكثر من إخفاء الشيفرة عن النظرة السريعة، ولا يجعلها آمنة.
الأسئلة الشائعة
أيهما أفضل لملفات SVG: Base64 أم ترميز URL؟
بالنسبة إلى SVG في CSS، يكون ترميز URL عادةً أصغر ويظل مقروءًا. أما Base64 فهو أكثر متانة عندما تمر السلسلة عبر أنظمة أخرى أو عندما تشترط واجهة API استخدام Base64.
لماذا لا يظهر data URI الخاص بملف SVG؟
xmlns عن العنصر الجذري، أو وجود # غير مُهرَّب في URI مرمّز بالنسبة المئوية، أو خطوط أو صور يحمّلها ملف SVG من ملفات أخرى.هل يمكنني تحويل SVG إلى سلسلة Base64 بصيغة PNG؟
نعم. اختر PNG من «التحويل إلى». سيرسم المتصفح ملف SVG كوحدات بكسل، ويتيح لك خيار «أقصى عرض» تصغير النتيجة.