مولّد عناصر نائب SVG

كيف يعمل مولّد العناصر النائبة بصيغة SVG

ما الذي تفعله الأداة

ينشئ مولّد العناصر النائبة بصيغة SVG صوراً متجهية خفيفة كعناصر نائبة بأبعاد مخصصة وألوان خلفية وتراكبات نصية وإعدادات خطوط. ويُخرج ترميز SVG مباشرةً وكذلك كـ URI بيانات Base64 جاهز للتضمين في HTML أو CSS. وبما أن SVG مستقل عن الدقة وعادةً ما يكون أقل من 1KB، فإن هذه العناصر النائبة تُحمَّل فوراً دون طلبات شبكة.

حالات استخدام شائعة للمطورين

يستخدم مطوّرو الواجهة الأمامية عناصر SVG النائبة أثناء النمذجة الأولية لحجز مساحة التخطيط قبل توفر الصور الحقيقية، مما يتجنب التحول التراكمي في التخطيط (CLS). وهي مفيدة في أنظمة التصميم كبدائل للصور الرمزية، وهياكل مصغّرات (skeletons)، وحاويات الصور المتجاوبة. ويضمّن مطوّرو البريد الإلكتروني عناصر نائبة على شكل URI بيانات داخل قوالب HTML حيث قد تمنع برامج البريد تحميل الصور الخارجية.

تنسيقات البيانات أو أنواعها أو متغيراتها

المخرجات هي مستند SVG 1.1 قياسي يحتوي على مستطيل ممتلئ وعنصر نصي في المنتصف. يقوم متغير URI البيانات بترميز هذا الـ SVG كسلسلة Base64 مسبوقة بـ 'data:image/svg+xml;base64,' للاستخدام المباشر في سمات img src، أو خصائص CSS background-image، أو HTML المضمّن. تُحدَّد الأبعاد بالبكسل لكن SVG يتدرج إلى أي حجم حاوية دون تكسّر لأنه تنسيق متجهي.

المزالق الشائعة والحالات الطرفية

لا تقوم المتصفحات بتخزين عناوين بيانات URI مؤقتًا بشكل مستقل عن المستند الذي تُضمَّن فيه، لذا فإن استخدام العنصر النائب نفسه عبر صفحات كثيرة يزيد إجمالي حجم النقل مقارنةً بملف خارجي واحد مخزَّن مؤقتًا. قد تتجاوز تسميات النص الطويلة جدًا حدود viewBox في SVG إذا كانت الأبعاد صغيرة. بعض عملاء البريد الإلكتروني الأقدم لا يدعمون عناوين بيانات URI الخاصة بـ SVG، فيلجؤون إلى أيقونة صورة معطلة. قد تحظر ترويسات سياسة أمان المحتوى (CSP) عناوين بيانات URI المضمّنة إذا لم يتم تضمين 'data:' ضمن img-src.

متى تستخدم هذه الأداة بدلًا من الكود

استخدم أداة المتصفح هذه لإنشاء صور عناصر نائبة لمرة واحدة بسرعة أثناء إعداد المخططات الهيكلية (wireframing) أو النمذجة الأولية (prototyping) دون إضافة تبعيات للبناء. ولتوليد عناصر نائبة ديناميكيًا في بيئة الإنتاج (مثل بدائل الصور التي يرفعها المستخدمون)، استخدم قوالب SVG على جانب الخادم أو خدمات مخصصة مثل plaiceholder التي تتكامل مع مسار تحسين الصور لديك ويمكنها إنشاء عناصر نائبة ضبابية منخفضة الجودة (LQIP) من الصور الفعلية.