SVG إلى Data URI
حوّل SVG إلى data URI مُحسَّن للتضمين.
حول تحويل SVG إلى Data URI
يحول SVG إلى Data URI ترميز SVG إلى سلسلة Data URI محسّنة يمكن تضمينها مباشرة في سمات HTML img src، أو خصائص CSS background-image، أو متغيرات JavaScript دون الحاجة إلى طلب HTTP منفصل لملف SVG. يقوم Data URI بتشفير المورد مضمنًا في المستند باستخدام تشفير URL أو Base64، مما يلغي رحلة ذهاب وعودة عبر الشبكة ويبسط نشر أيقونات SVG، والشعارات، والرسومات الزخرفية في تطبيقات الويب. تُفضل Data URIs المشفرة بـ URL عمومًا على Base64 لملفات SVG لأنها أكثر إحكامًا وتبقى قابلة للقراءة جزئيًا للبشر في أدوات مطوري المتصفح. تقوم الأداة اختياريًا بتقليص ترميز SVG قبل التشفير لتقليل حجم Data URI النهائي.
كيفية الاستخدام
الصق كود SVG الخاص بك في منطققة الإدخال وسيتم إنشاء Data URI على الفور في لوحة الإخراج. اختر بين تشفير URL وتشفير Base64 باستخدام مفتاح التبديل الخاص بالتنسيق: ينتج تشفير URL مخرجات أصغر لمعظم ملفات SVG بينما يعتبر Base64 أكثر أمانًا لمحتوى SVG الذي يحتوي على أحرف غير عادية قد تعطل تحليل سمات HTML. انسخ سلسلة Data URI الكاملة والصقها في قيمة CSS background-image url()، أو سمة HTML img src، أو ثابت JavaScript. يتم عرض معاينة حية لـ SVG المعروض حتى تتمكن من التحقق من صحة المظهر البصري قبل نسخ الإخراج.
حالات الاستخدام الشائعة
- تضمين أيقونات SVG كـ Data URIs لـ CSS background-image في أوراق أنماط المكونات للتخلص من طلبات HTTP الإضافية للأصول المتجهة الصغيرة
- تضمين شعارات الشركات والرسوم التوضيحية التسويقية كـ Data URIs في قوالب البريد الإلكتروني HTML حيث يتم حظر تحميل الصور الخارجية بواسطة عملاء البريد الإلكتروني
- تحويل أيقونات SVG المفضلة (favicons)، وأيقونات التطبيقات، والمؤشرات (cursors) إلى Data URIs للتضمين المباشر في مستندات HTML ذات الملف الواحد وإضافات المتصفح
- تضمين محتوى SVG الحيوي الظاهر في الجزء العلوي من الصفحة (above-the-fold) كـ Data URIs للتخلص من طلبات الشبكة التي تعيق العرض عند التحميل الأولي للصفحة
- تعيين صور أقنعة SVG، والأنماط، والفلاتر كـ Data URIs في CSS لأوراق أنماط المكونات المستقلة والقابلة للنقل