معاينة / محرر SVG

كيف تعمل أداة معاينة / محرر SVG

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

تعرض أداة معاينة / محرر SVG ترميز SVG مباشرة أثناء تحريره وتستخرج البيانات الوصفية (العرض، الارتفاع، viewBox، عدد العناصر) للفحص السريع. يضيف مفتاح تبديل خلفية مُربّعة حتى تتمكن من رؤية المناطق الشفافة بوضوح. كما تنتج الأداة data URI مُرمّزًا لعناوين URL مناسبًا للاستخدام مباشرة في CSS background-image أو سمات HTML src.

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

يختبر مصممو الأيقونات حسابات viewBox وعروض الحدود (stroke) عند أحجام مختلفة. يتحقق مطورو الواجهة الأمامية من أن أيقونة SVG المعدّلة يدويًا ما تزال تُعرض بشكل صحيح بعد التحسين (يدويًا أو عبر SVGO). ينشئ مطورو البريد الإلكتروني نسخ data URI مدمجة من العلامات التجارية لتضمينها داخل HTML. يوضح المعلّمون كيف تؤثر سمات مثل preserveAspectRatio وoverflow على العرض.

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

المدخل هو ترميز SVG XML خام. المخرج هو SVG نفسه معروضًا داخل iframe معزول بالإضافة إلى data URI مُرمّز لعناوين URL (data:image/svg+xml;charset=utf-8,…). يحسب مقياس عدد العناصر كل وسم فتح (بما في ذلك defs وg والتدرجات والعناصر المتداخلة المشابهة)، ما يعطي تصورًا تقريبيًا عن التعقيد. تُعرض قيم السمات المستخرجة بصيغتها الخام.

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

لن تُحمّل الموارد الخارجية المشار إليها بواسطة عناصر `use` أو `image` مع href داخل iframe المعزول. يُحظر JavaScript المضمّن داخل عناصر script بواسطة صندوق الحماية — ينبغي أن تعتمد الحركات على SMIL أو إطارات CSS الرئيسية. ستعود SVGs التي تعتمد على خط محدد غير مثبت على النظام إلى خط افتراضي؛ قم بتضمين الخطوط أو استخدم خطوط النظام للمعاينات.

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

استخدم أداة المتصفح لتصميم الأيقونات لمرة واحدة، أو للتصحيح، أو لتوليد data URIs. لأصول الإنتاج، مرّر SVGs عبر SVGO مع إعداد مضبوط لإزالة البيانات الوصفية وتصغير الترميز، واستخدم نظام sprites أو تكاملًا مناسبًا مع أداة التجميع لتحميل الأيقونات في تطبيقك بدلًا من تضمين data URIs في كل مكان.