تحويل SVG إلى HTML

تحويل SVG إلى HTML عبر الإنترنت

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

تجهيز SVG مضمن ومتجاوب

احتفظ بقيمة viewBox للحفاظ على نظام إحداثيات SVG. وأزل العرض والارتفاع الثابتين عندما يحتوي ملف SVG على viewBox صالح للاستخدام، ثم حدد حجمه في شيفرة CSS الخاصة بك.

فهم حجم SVG ونسبة التوفير

يمثل «الحجم الأصلي» حجم ملف SVG الذي أدخلته، أما «حجم SVG بعد التحسين» فهو حجمه بعد معالجته بالخيارات التي حددتها، مثل إزالة التعليقات وتقريب الإحداثيات وتصغير الشيفرة. تُعرض الأحجام بوحدة kB، حيث إن 1 kB يساوي 1,000 بايت. ويمثل «التوفير» نسبة الانخفاض: فالانتقال من 10 kB إلى 7 kB يوفر 30%. وإذا كان الناتج أكبر، بسبب التنسيق المقروء مثلًا، تظهر «زيادة الحجم» بدلًا من ذلك. تقارن هذه الأرقام شيفرة SVG فقط، لا حجم الملفات المصدرة بصيغ JSX أو React أو CSS Data URI أو Base64.

الدقة العشرية والمسافة البادئة

تحدد «الدقة العشرية» عدد الأرقام التي تبقى بعد الفاصلة العشرية في الإحداثيات والسمات الرقمية. فمع دقة 2، تتحول 12.34567 إلى 12.35. قد يقلل خفض عدد المنازل العشرية حجم الملف، لكنه قد يغير التفاصيل الدقيقة؛ والقيمة الافتراضية 3 مجرد نقطة بداية، لذا تحقق من المعاينة. تستخدم «المسافة البادئة» مسافتين أو 4 مسافات أو علامات الجدولة لتسهيل قراءة شيفرة HTML وJSX دون تغيير الصورة. ويزيل خيار «تصغير شيفرة SVG» المسافات غير الضرورية لجعل الناتج أكثر إيجازًا، لذا يتعذر ضبط المسافة البادئة ما دام هذا الخيار مفعلًا.

HTML وJSX وReact وData URI لملفات SVG

ناتج HTML هو شيفرة SVG مضمنة، ويتم تنزيله بصيغة ملف SVG. وتكيّف صيغة JSX أسماء السمات والأنماط المضمنة لتناسب React. أما «مكون React» فيغلفها في دالة TypeScript تقبل خصائص SVG القياسية. وتنتج صيغة CSS Data URI تعريفًا لخاصية background-image؛ بينما تنتج صيغة Base64 عنوان URI لصورة SVG مرمزة. تصف إحصاءات الحجم ملف SVG بعد التحسين، لا الصيغ المرمزة الأكبر حجمًا. راجع سمات id قبل استخدام عدة نسخ مضمنة في الصفحة نفسها.

سير عمل SVG ثابت ومحلي

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