أنشئ صورة نائبة كـ URI بيانات SVG. اختر الحجم والألوان والتسمية، ثم انسخ الترميز أو URI البيانات أو وسم img جاهزًا. بدون طلبات شبكة، بدون خدمة خارجية.
صور نائبة بدون أي طلب شبكة. حدّد الأبعاد والألوان والتسمية، وانسخ SVG الخام أو URI البيانات أو وسم img كاملًا. لا يُجلب أي شيء، لذا تظل الصورة النائبة تعمل دون اتصال وداخل ملف التصميم أيضًا.
الفراغ يعود افتراضيًا إلى العرض والارتفاع، وهو ما تريده معظم الصور النائبة.
خدمات الصور النائبة مريحة حتى اللحظة التي لا تكون كذلك: يحدّ النطاق من معدل طلباتك، يحجبها وكيل المكتب، تعرضها على متن طائرة، أو تغيّر الخدمة مخرجاتها بهدوء فتتبدل نصف نماذجك. كل فشل من هذه الإخفاقات سببه شيء واحد - الصورة النائبة تعيش على خادم شخص آخر.
لا يحمل SVG كـ URI بيانات مثل هذا الاعتماد. الصورة كلها سلسلة نصية داخل ترميزك، لذا تُعرض بالشكل نفسه دون اتصال، وداخل عميل بريد إلكتروني، وفي تصدير ثابت، وفي لقطة شاشة تُلتقط بعد ثلاث سنوات. كما أنها لا تكلف شيئًا من زمن الاستجابة: لا بحث DNS، لا اتصال، لا رحلة ذهاب وعودة. لصفحة بها عشرون صورة نائبة أثناء التطوير، هذا الفرق ملحوظ جدًا.
URI البيانات الذي يصدره هذا الدّول مشفّر بالنسبة المئوية، وليس base64. كلاهما صالح، لكن الترميز بالنسبة المئوية هو الخيار الأفضل لـ SVG لسببين.
الأول هو الحجم. يضخّم base64 الحمولة بنحو الثلث، بينما يوسّع الترميز بالنسبة المئوية فقط الحفنة القليلة من الأحرف التي تحتاج فعلًا إلى هروب، لذا فإنه لـ SVG - وهو غالبًا ASCII بسيط - ينتهي عادةً أقصر. والثاني هو قابلية القراءة: يمكنك النظر إلى SVG مشفّر بالنسبة المئوية في ورقة الأنماط الخاصة بك وتبقى قادرًا على تمييز ماهيته، أو تعديل لون، أو رصد خطأ مطبعي. أما كتلة base64 فيجب فك ترميزها قبل أن تعني أي شيء.
الشيء الوحيد الذي يحتاج الترميز بالنسبة المئوية عناية خاصة معه هو علامة الاقتباس المفردة، ولهذا يُهرَّب صراحةً هنا: قيم CSS url() تُغلَّف عادةً بعلامات اقتباس مفردة، والفواصل العليا غير المهرَّبة داخل SVG ستنهي القيمة مبكرًا.
يحمل SVG المُنشأ سمتَي العرض والارتفاع الصريحتين بالإضافة إلى viewBox مطابق. هذا المزيج مقصود. يمنح العرض والارتفاع المتصفح حجمًا جوهريًا حتى لا تقفز البنية قبل وضع الصورة، ويسمح viewBox لنفس الصورة بالتمدد بسلاسة إلى أي حجم تحدده في CSS.
ولأنها صورة متجهة، تبقى التسمية حادة عند أي مقياس - لا نص ضبابي على شاشات عالية الدقة، ولا أصل منفصل بمقاس 2x. إذا أردت أن تملأ الصورة النائبة حاويةَها، عيّن width: 100%; height: auto في CSS وسيحافظ viewBox على نسبة الأبعاد لك. وإذا أردت صندوقًا ثابتًا بغض النظر عن نسبة الأبعاد، أبقِ السمات كما وُلّدت وسيلتزم بها المتصفح.