ملف SVG بترميز Base64 لا يظهر؟ حل عملي للفِرق الهندسية

ملف SVG بترميز Base64 لا يظهر؟ حل عملي للفِرق الهندسية

هذه المشكلة تتكرر كثيرًا في المشاريع الحقيقية:

• يبدو أن img src="data:image/svg+xml;base64,..." صحيح، لكن لا شيء يظهر على الشاشة.
• قد تعمل سلسلة SVG نفسها في مكان واحد ثم تفشل داخل خلفية CSS.
• من الصعب اكتشاف الخطأ أثناء مراجعة الكود، لكن إصلاحه مكلف.

إذا بدا لك هذا السيناريو مألوفًا، فسيمنحك هذا الدليل طريقة واضحة وقابلة للتكرار لمعالجة المشكلة.

لماذا يصعب إصلاح هذه المشكلة

المشكلة نادراً ما تكون سطراً مكسوراً. إنها عادة مشكلة سلسلة:

1. مصدر SVG قد يكون غير صالح بالفعل.
2. التشفير قد لا يتطابق مع السياق المستهدف.
3. HTML وCSS وJSON كل منها يتطلب سلوك تهريب مختلف.
4. تختلف قواعد التنظيف والأمان حسب البيئة التي تعمل فيها.

هذا هو السبب في أن SVG واحد يمكن أن يُعرض في سياق ويفشل في آخر.

الأسباب الأكثر شيوعاً (بالترتيب)

1. اختيار MIME prefix خاطئ
   استخدم data:image/svg+xml;base64, أو data:image/svg+xml,.

2. ترميز Base64 غير صحيح
   قد يفشل btoa(svg) المباشر إذا كان SVG يحتوي على أحرف خارج ASCII.

3. عدم تطابق التهريب عبر السياق
   CSS background-image يتطلب تهريباً مختلفاً عن <img>.

حل SVGView

SVGView ينتج Base64 SVG يعمل عبر سياقات متعددة:

1. التحقق: تأكد من أن SVG صالح قبل الترميز.
2. التطهير: أزل أي محتوى غير آمن.
3. التحويل: أنشئ data:image/svg+xml;base64, متوافقًا مع السياق المطلوب.

كيف تستخدم SVGView

1. افتح عارض SVG
2. الصق SVG أو ارفعه
3. انقر "تصدير" واختر "Data URI (Base64)"
4. انسخ النتيجة وضعها في img src أو background-image

البيانات المزدوجة (Base64) مقابل غير المشفرة

• Base64 (data:image/svg+xml;base64,...): أفضل لـ <img> والتخزين
• Raw (data:image/svg+xml,...): مناسب أكثر لـ CSS عندما تستطيع التحكم في الهروب النصي.

ملخص

مشكلة SVG بترميز Base64 نادرًا ما تكون خطأً واحدًا فقط. غالبًا ما تحتاج إلى تسلسل واضح: تحقّق أولًا، ثم نظّف الملف، ثم أعد ترميزه بالشكل المناسب. بهذه الطريقة تحصل على SVG يعمل بثبات في أغلب السياقات الشائعة.