ما هو SVG؟ دليل شامل لصيغة الرسوم المتّجهة

SVG صيغة صور مكوّنة من تعليمات رسم لا من بكسلات. فعند حفظ شعار أو أيقونة أو مخطط بصيغة SVG، يحتوي الملف على أوامر مثل "ارسم منحنى من هذه النقطة إلى تلك واملأه بهذا اللون". ولهذا تبقى SVG حادّة بأي حجم، وكثيرًا ما تكون صغيرة جدًا، ويمكن فتحها وتحريرها في محرّر نصوص. يتناول هذا المقال مكانة SVG بين معايير W3C، وبنية الملف، ودعم المتصفحات والبرامج، ومخاطرها الأمنية، وكيفية التحويل بين SVG وPNG أو JPG.

ما هو SVG؟

SVG (اختصار Scalable Vector Graphics، أي الرسوم المتّجهة القابلة للتحجيم) معيار من W3C مبني على XML لوصف الرسوم المتّجهة ثنائية الأبعاد. امتداده .svg ونوع MIME الخاص به image/svg+xml. وتستخدم النسخة المضغوطة بـ gzip الامتداد .svgz.

تخزّن الصيغ النقطية (JPG وPNG وWebP) الصورة كشبكة ثابتة من البكسلات؛ فإذا كبّرتها ظهرت البكسلات. أما SVG فتصف الأشكال رياضيًا، ويعيد المتصفح أو البرنامج رسمها بأي دقة تملكها الشاشة. ويصف دليل صيغ الصور في MDN صيغة SVG بأنها خيار مثالي للصور التي يمكن تمثيلها بأوامر رسم، لا سيما حين يكون حجم العرض مجهولًا أو متغيرًا، ويشير إلى أنها غير مفيدة عمومًا للصور الفوتوغرافية.

التاريخ: SVG 1.0 و1.1 وSVG 2

• 4 سبتمبر 2001: نُشرت SVG 1.0 بوصفها توصية من W3C.
• 14 يناير 2003: أصبحت SVG 1.1 توصية. وقد قسّم الإصدار 1.1 اللغة إلى وحدات، ما سهّل تعريف مجموعات فرعية مثل ملفات الأجهزة المحمولة.
• 16 أغسطس 2011: نُشرت الطبعة الثانية من SVG 1.1. وهي الإصدار المستقر الذي تبني عليه المتصفحات اليوم.
• SVG 2: وفقًا لسجل منشورات W3C، ظهرت مسودات العمل منذ 2012، ونُشرت أول لقطة لتوصية مرشّحة في 15 سبتمبر 2016. وأحدث لقطة مؤرّخة في 6 أكتوبر 2026؛ ولا تزال الوثيقة في مرحلة التوصية المرشّحة.

تبني SVG 2 على الطبعة الثانية من 1.1 وتهدف إلى تكامل أفضل مع HTML وCSS. وانتقلت بعض المواضيع مثل المرشّحات والأقنعة والخطوط إلى وحدات CSS وFX مستقلة. وعمليًا تطبّق المتصفحات أجزاءً من SVG 2، لذا لا تفترض أن كل ميزة تعمل في كل مكان.

بنية ملف SVG

يبدو ملف SVG بسيط هكذا:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

نظام الإحداثيات: viewBox وwidth وheight

تحدّد viewBox نظام الإحداثيات الداخلي للرسم (من 0 إلى 100 هنا). أما width وheight فتحدّدان المساحة التي يشغلها الرسم على الصفحة. وملف SVG الذي يحوي viewBox يتحجّم بالتناسب مع أي حجم تعطيه إياه في CSS. أما الملفات الخالية من viewBox فقد تُقصّ عند تغيير حجمها، وهذا من أكثر الأخطاء شيوعًا في الشعارات.

العناصر الأساسية

• الأشكال: rect وcircle وellipse وline وpolyline وpolygon وpath الذي يستطيع رسم أي شيء.
• النص: text وtspan. يبقى النص قابلًا للتحديد والبحث، لكن إن لم يكن الخط موجودًا على جهاز العرض يُستخدم خط بديل.
• التجميع وإعادة الاستخدام: g وdefs وsymbol وuse. وكثيرًا ما تُجمَّع مجموعات الأيقونات كعناصر symbol في ملف واحد.
• التلوين: ألوان مصمتة، وتدرّجات خطية وشعاعية، وأنماط، ومسارات قصّ، وأقنعة، ومرشّحات (تمويه، ظل منسدل).
• التنسيق والحركة: يمكن تنسيق SVG بـ CSS؛ وتضيف رسوم CSS المتحركة وعناصر الحركة في SMIL الحركة إليها.
• المحتوى المضمّن: image للصور النقطية، وforeignObject لـ HTML، وscript لـ JavaScript.

الألوان والشفافية والطبقات والصفحات

الشفافية أصيلة في SVG: فكل ما لم يُرسم يبقى فارغًا، وتحدّد opacity وfill-opacity الشفافية الجزئية. وتُمثَّل الطبقات بمجموعات g؛ وبهذه الطريقة يحفظ Inkscape وIllustrator طبقاتهما. والألوان بنظام sRGB افتراضيًا، ولا يوجد حدّ لعمق البتات بالمعنى المعتاد لأن الألوان تُكتب أرقامًا. وSVG ليست صيغة مستندات متعددة الصفحات؛ وللرسوم متعددة الصفحات تُعدّ PDF أنسب.

الدعم في المتصفحات والأنظمة والبرامج

وفقًا لـ MDN، تدعم Chrome وEdge وFirefox وOpera وSafari جميعها SVG. ويمكنك استخدامها عبر <img>، أو كخلفية CSS ‏background-image، أو مضمّنة مباشرة داخل HTML، أو عبر <object> و<iframe>. وتقرأ أدوات الرسم المتّجه مثل Inkscape وAdobe Illustrator وAffinity Designer وFigma ملفات SVG وتكتبها، وتتيح الإصدارات الحالية من Microsoft Office إدراج رسوم SVG.

أما في أماكن أخرى فالدعم ضعيف: فكثير من الشبكات الاجتماعية وبرامج البريد الإلكتروني وتطبيقات المراسلة ونماذج الرفع ترفض SVG أو لا تعرض لها معاينة. وجزء من السبب هو الخطر الأمني الموضّح أدناه.

الأمان: تعامل مع SVG كأنها مستند

SVG مستند XML ويمكن أن يحتوي على عنصر script وخصائص أحداث (مثل onload) ومراجع خارجية. وتوضّح صفحة "SVG as an image" في MDN أنه عند استخدام SVG عبر <img> أو كخلفية CSS، تعطّل المتصفحات JavaScript ولا تحمّل الموارد الخارجية مثل الصور أو أوراق الأنماط. لكن هذه القيود لا تنطبق حين يُفتح الملف مباشرة أو يُضمَّن عبر <iframe> أو <object> أو <embed>.

والنتيجة العملية: إذا سمح موقع للمستخدمين برفع ملفات SVG وقدّمها مباشرة من نطاقه الخاص، فقد يعمل سكربت مضمّن في الملف ضمن سياق ذلك الموقع (هجوم XSS مخزّن). ومن وسائل الحماية المعتادة:

• تمرير ملفات SVG المرفوعة عبر أداة تنقية تزيل script وخصائص الأحداث وforeignObject والروابط الخارجية.
• تقديم ملفات المستخدمين من نطاق منفصل، مع سياسة أمان محتوى (Content-Security-Policy) صارمة، أو كملفات للتنزيل (Content-Disposition: attachment).
• إن لم تكن بحاجة إلى النسخة المتّجهة، فحوّل ملفات SVG المرفوعة إلى PNG على الخادم وانشر النسخة النقطية فقط.

الاستخدامات الشائعة

• الشعارات وأصول الهوية: ملف واحد يبقى حادًّا من بطاقات العمل إلى اللوحات الإعلانية.
• أيقونات الواجهات: قابلة للتلوين بـ CSS ولا تبدو ضبابية أبدًا على الشاشات عالية الكثافة.
• المخططات والخرائط والرسوم التوضيحية: مكتبات مثل D3.js ترسم البيانات مباشرة في عناصر SVG.
• أيقونات المواقع (Favicon): تقبل المتصفحات الحالية أيقونات SVG عبر <link rel="icon" type="image/svg+xml">.
• القصّ والطباعة: تعمل آلات القصّ بالليزر وقصّ الفينيل والتطريز بالمسارات المتّجهة.

نقاط القوة والضعف

مشكلات شائعة وطرق حلّها

موقع أو تطبيق لا يقبل SVG

أسهل حل هو نسخة PNG. إذ يرسم محوّل SVG إلى PNG لدينا الرسمَ في ملف PNG شفاف داخل متصفحك، بعرض البكسل الذي تختاره. لا يُرفع ملفك ولا يغادر جهازك أبدًا.

يظهر النص بخط مختلف

لا تضمّن SVG الخطوط افتراضيًا؛ فإن لم يكن الخط موجودًا على نظام العرض يُستخدم خط بديل. وفي سياق الصورة لا تُحمَّل الخطوط الخارجية أيضًا. حوّل النص إلى مسارات (outlines) في أداة التصميم، أو ضمّن الخط.

حجم SVG على الصفحة خاطئ أو مقصوص

من دون viewBox، أو مع قيم ثابتة لـ width/height، لا يتصرّف التحجيم كما هو متوقع. أضف إلى عنصر svg الجذري خاصية viewBox تغطي الرسم، وحدّد الحجم في CSS.

الملف أكبر من المتوقع

تكتب أدوات التصميم في SVG بيانات وصفية خاصة بالمحرّر وخانات عشرية زائدة وطبقات مخفية. وأداة تحسين مثل SVGO تزيلها. كما أن ضغط Gzip أو Brotli على الخادم يصغّر ملفات SVG النصية أكثر.

أحتاج شعاري المحفوظ بصيغة PNG بصيغة SVG

لا يمكن "تحويل" صورة نقطية إلى متّجهة تحويلًا حقيقيًا؛ ما تفعله الأدوات هو التتبّع (tracing): تُكتشف الأشكال ويُعاد رسمها كمسارات. وتقوم أداتا PNG إلى SVG وJPG إلى SVG لدينا بالتتبّع باستخدام 2 إلى 8 ألوان. النتائج جيدة للشعارات والرسوم البسيطة وتقريبية للصور الفوتوغرافية. ومع هاتين الأداتين يُرفع الملف إلى خوادمنا عبر اتصال آمن، ويُتتبَّع هناك ثم يُحذف خلال 30 دقيقة على الأكثر.

نصائح للتحويل

• اعرف الحجم المستهدف: عند تحويل SVG إلى PNG، اختر أكبر حجم ستُعرض به الصورة، مضاعفًا للشاشات عالية الكثافة. في أداتنا يمكن أن يصل الضلع الأطول إلى 4096 بكسل؛ وإن تركت العرض فارغًا، تُحجَّم الرسوم الصغيرة بحيث يبلغ ضلعها الأطول 1024 بكسل.
• JPG للمحتوى الفوتوغرافي: إن كان ملف SVG يضمّن صورة فوتوغرافية ولا تحتاج إلى الشفافية، فإن JPG أو WebP أصغر من PNG؛ ويمكنك تحويل ملف PNG بعد ذلك في محوّل الصور.
• أيقونات المواقع: إن كان شعارك بصيغة SVG، فإن مُنشئ أيقونات Favicon يقبله ويضيف icon.svg إلى الحزمة.
• مصدر نظيف للتتبّع: عند إنشاء SVG من PNG، ابدأ بصورة عالية الدقة وبألوان مسطّحة وخالية من التشويش.

الأسئلة الشائعة

ما الفرق بين SVG وPNG؟

ملف PNG عدد ثابت من البكسلات ويصبح ضبابيًا عند تكبيره. أما SVG فتصف الأشكال ويُعاد رسمها بحدّة بأي حجم. تناسب SVG الشعارات والأيقونات، بينما يناسب PNG أو JPG الصور الفوتوغرافية ولقطات الشاشة.

هل يمكن أن يحتوي ملف SVG على فيروس؟

SVG ليست برنامجًا قابلًا للتنفيذ، لكن يمكنها تضمين JavaScript. لا تعمل السكربتات حين تُعرض SVG كصورة (<img>)، لكنها قد تعمل حين يُفتح الملف مباشرة في المتصفح. افحص ملفات SVG مجهولة المصدر في برنامج عرض، أو حوّلها إلى PNG، بدلًا من فتحها مباشرة.

هل يمكنني إدراج SVG في Word أو PowerPoint؟

تدعم الإصدارات الحالية من Microsoft Office إدراج SVG. وفي الإصدارات الأقدم، أو إن كنت ستشارك الملف مع برامج أخرى، فإن نسخة PNG أكثر أمانًا.

هل يؤدي تحويل SVG إلى PNG إلى فقدان الجودة؟

PNG بلا فقد، لكن الرسم يُثبَّت على حجم بكسل محدّد. اختر عرضًا كافيًا ولن تلاحظ أي فقد؛ أما تكبير ملف PNG لاحقًا فسيجعله ضبابيًا.

هل تدعم SVG الحركة؟

نعم. يمكن أن تأتي الحركة من رسوم CSS المتحركة وعناصر الحركة في SMIL وJavaScript. والتحويل إلى PNG يعطيك إطارًا واحدًا.

المصادر

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: SVG 2 publication history
• MDN: SVG as an image
• MDN: Image file type and format guide