متجه SVG (.svg)
توصية قياسيرسومات متجهية قابلة للتحجيم (SVG) هو تنسيق صور متجهية قائم على XML للرسوم ثنائية الأبعاد، ويدعم التفاعل وتنسيق CSS والرسوم المتحركة.
تحويل SVG إلى PNG
محول مجاني داخل المتصفح للتحويل من SVG إلى PNG. قم بتحويل الملفات فوراً على جهازك.
ضغط SVG عبر الإنترنت
خاص - لا تغادر الملفات جهازك أبدًا
فحص البيانات الوصفية
تتعرف أنظمة التشغيل ومحللات الملفات على ملفات SVG من خلال فحص تسلسل البايت الثنائي البادئ:
توقيع رأس الملف على مستوى البايت (Magic Bytes)
تتعرف أنظمة التشغيل ومحللات الملفات على ملفات SVG من خلال فحص تسلسل البايت الثنائي البادئ:
التوقيع الست عشري (الإزاحة 0):
3C 73 76 67تمثيل ASCII: <svg
التوحيد القياسي: توصية W3C (SVG 1.1 / SVG 2)
المواصفات الفنية
| هيكلية الحاوية | مستند ترميز نصي قائم على XML يعرّف أشكالًا هندسية متجهية ثنائية الأبعاد |
| الضغط | ضغط النص باستخدام Gzip أو Brotli (يستخدم SVGZ ضغط Gzip) |
| ترتيب البايتات (Endianness) | لا ينطبق (تدفق أحرف نصي بترميز UTF-8 أو UTF-16) |
| مساحات الألوان | sRGB, وحدة ألوان CSS 4 (Display P3 وlab وlch) |
| القنوات والبنية | أشكال متجهية ومنحنيات بيزييه ونصوص وأقنعة تعتيم بدقة غير محدودة |
| الحد الأقصى للأبعاد | مستقل عن الدقة؛ يمكن تكبيره لأي إطار عرض من دون ظهور البكسلات |
| الشفافية | يدعم شفافية ألفا متغيرة بالكامل وأوضاع مزج CSS |
| البث والتحميل التدرجي | يدعم محلل XML في المتصفح تحليل تدفق النص تدريجيًا |
مصفوفة المقارنة التقنية: SVG مقابل المنافسين
| السمة التقنية | SVG (الحالي) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| نموذج العرض | نموذج DOM متجهي يحتفظ بالعناصر | لوحة نقطية فورية | حاوية صفحة ثابتة تحتفظ بمحتواها | شبكة بكسلات نقطية |
| التنسيق وCSS | قابل للتنسيق بالكامل عبر فئات ومتغيرات CSS | يتطلب عمليات إعادة رسم لواجهة برمجة تطبيقات canvas في JavaScript | لا يدعم التنسيق الديناميكي باستخدام CSS | بكسلات نقطية ثابتة |
| قابلية التكبير بلا حدود | نعم (منحنيات متجهة رياضية) | يتطلب تغيير الدقة يدويًا | نعم (عناصر متجهة) | لا (تظهر بكسلات عند التكبير) |
| التفاعل | أحداث DOM الأصلية (التمرير فوق العنصر، والنقر، والرسوم المتحركة) | يتطلب حسابات يدوية لتحديد مواضع النقر | مستند ثابت | يتطلب خريطة صور أو عنصر canvas |
أنماط التلف الشائعة ودليل الاسترداد بالنظام الست عشري
يعرض المتصفح خطأ تحليل XML: رمز غير مكتمل أو علامة غير متطابقة.
السبب الجذري: بنية XML تالفة، أو علامات إغلاق مفقودة، أو علامات العطف غير المُهَرَّبة ('&' بدلاً من '&').
الاسترداد: التحقق باستخدام مدقق XML (xmllint file.svg) وتصحيح العلامات غير المتوازنة.
تحليل الأمان ومتجهات الهجوم على المحلّل
SVG مستند XML قابل للتنفيذ ويدعم وسوم <script> والكيانات الخارجية؛ لذلك قد يؤدي عرض ملفات SVG غير الموثوقة إلى مخاطر كبيرة لهجمات XSS وSSRF.
ناقلات الهجوم المعروفة
- هجمات البرمجة النصية عبر المواقع (XSS) المخزنة عبر علامات '<script>' المضمنة أو معالجات الأحداث 'onload='.
- هجمات كيانات XML الخارجية (XXE) التي تقرأ ملفات الخادم المحلي عند تحليلها على خوادم الخلفية.
- هجوم توسيع كيانات XML «Billion Laughs» الذي يؤدي إلى حجب الخدمة.
أفضل الممارسات الدفاعية: نقّح ملفات SVG دائمًا باستخدام DOMPurify قبل تضمينها، أو اعرضها مع ترويسة Content-Security-Policy: default-src 'none'، أو استخدم وسم <img> الذي يعطّل البرامج النصية تلقائيًا.
الأصول التاريخية والمحطات الرئيسية
المزايا الرئيسية والإيجابيات
- استقلال تام عن الدقة: خطوط وحروف واضحة على أي شاشة أو مقياس طباعة.
- حجم ملف صغير للغاية للشعارات، والأيقونات، وعناصر واجهة المستخدم.
- يمكن برمجتها وتنسيقها بالكامل باستخدام CSS وJavaScript ضمن DOM في المتصفح.
القيود الفنية والسلبيات
- غير مناسبة للصور الفوتوغرافية أو الصور المعقدة ذات التدرجات اللونية المستمرة.
- مسارات المتجهات المعقدة التي تضم آلاف النقاط يمكن أن تتسبب في بطء العرض على وحدة المعالجة المركزية واستهلاك عالٍ للبطارية.
- طبيعة XML تتيح تضمين البرمجة النصية، مما يتطلب تنقية صارمة قبل عرض التحميلات غير الموثوقة.
معلومات تقنية طريفة
- نظرًا لأن SVG عبارة عن نص XML عادي، فإن ضغطه باستخدام Gzip (مما ينتج عنه ملف .svgz) يقلل الحجم عادةً بنسبة 70% إلى 80%.
- تحدد السمة viewBox لوحة إحداثيات تجريدية تتطابق ديناميكيًا مع بكسلات الشاشة الفعلية.
- افتقرت متصفحات الويب المبكرة في البداية إلى محركات SVG أصلية، مما دفع شركة Adobe لتوزيع ملحق متصفح Adobe SVG Viewer قبل أن يترسخ الدعم الأصلي في المتصفحات حوالي عام 2011.
الأسئلة التقنية المتكررة
هل يمكن أن تحتوي ملفات SVG على برامج ضارة؟
نعم. ملفات SVG صالحة وفق XML ويمكن أن تضم JavaScript («<script>») يُنفّذ عند فتح الملف مباشرةً في المتصفح أو تضمينه داخل عنصر «<svg>». أما عرض SVG عبر وسم «<img>» فيمنع تنفيذ البرامج النصية تلقائيًا.
متى أستخدم SVG بدلًا من PNG؟
استخدم SVG للأيقونات والشعارات والرسوم البيانية والتوضيحية والنصوص التي يلزم أن تظل واضحة عند تغيير حجمها على الشاشات المختلفة، مع حجم ملف صغير. واستخدم PNG أو WebP للصور الفوتوغرافية.
كيف يمكنني تحسين ملفات SVG الكبيرة أو المعقدة؟
يمكنك تحسين مسارات المتجهات بإزالة البيانات الوصفية الزائدة وتعليقات المحررات (مثل Inkscape أو Illustrator) والمجموعات غير المرئية وتعريفات مساحات الأسماء غير المستخدمة، باستخدام أدوات مثل SVGO أو ضغط SVG.
أزواج تحويل SVG ذات الصلة
يؤدي تحويل ملفات المتجهات SVG إلى صور PNG نقطية إلى تحويل الرسومات القابلة لتغيير حجمها والمبنية على الشفرات إلى شبكات ذات بكسلات ثابتة لضمان توافق عام مع التطبيقات.
ضمّ صور PNG النقطية داخل حاوية متجهة من نوع SVG XML للقياس المتجاوب على الويب والتكامل مع التخطيطات المتوافقة مع المتجهات.
حوّل سجلات الرسوم المتجهة القديمة ذات 16 بتاً في Windows GDI إلى مسارات SVG حديثة قابلة للتحجيم من دون فقدان الدقة.
حوّل رسومات Windows Enhanced Metafile ذات 32 بت إلى متجهات SVG واضحة ومتجاوبة للويب وبرامج التصميم.
يؤدي تحويل رسم DXF إلى ملف SVG إلى نقل بيانات المتجهات الهندسية المعقدة إلى رسومات XML خفيفة الوزن تناسب متصفحات الويب وبرامج تحرير المتجهات.
يؤدي تحويل رسومات المتجهات القابلة للتحجيم إلى تنسيق تبادل الرسومات إلى نقل المتجهات المرئية الجاهزة للويب إلى إحداثيات رياضية دقيقة تتطلبها برامج التصميم بمساعدة الحاسوب.
شارك شعارًا أو رسمًا توضيحيًا بصيغة SVG كملف PDF من صفحة واحدة. تصبح مساراته القابلة للتحجيم صورة ثابتة الدقة، لذا لا يمكن لتكبير الصورة استعادة تفاصيل الرسوم المتجهة.