إن سبق أن حاولت تكبير شعار فرأيته يخرج ضبابيًا ومليئًا بالمربّعات، فأنت تعرف كم أن هذه المشكلة مزعجة. صيغة SVG وُجدت لحلّ هذا الأمر تحديدًا؛ فهي تعمل بطريقة مختلفة تمامًا عن JPG وPNG، وفهم هذا الفرق هو مفتاح اختيار الصيغة المناسبة في كل موقف.
ماذا تعني كلمة SVG؟
SVG اختصار لعبارة Scalable Vector Graphics — أي «الرسوم المتجهية القابلة للتحجيم». وهي صيغة صور مفتوحة، وضع معاييرها اتحاد W3C (الجهة نفسها التي تضع مواصفات HTML وCSS)، وتدعمها جميع المتصفحات الحديثة دعمًا أصليًا.
فبينما تخزّن JPG وPNG الصورة على هيئة شبكة من البكسلات الملوّنة، تصف SVG الصورة نصيًا، مستعينة بإحداثيات رياضية لتمثيل الأشكال والخطوط والمنحنيات والألوان. ملف SVG في حقيقته ملف نصي، ويمكن فتحه وتعديله في أي محرّر شيفرة.
كيف تعمل SVG من الداخل؟
يُكتب ملف SVG بلغة XML، وهي لغة ترميز تشبه HTML. فدائرة حمراء بسيطة، مثلًا، تُوصف في SVG على هذا النحو:
يقرأ المتصفح هذه التعليمات الرياضية ويرسم الصورة على الشاشة مباشرة، محتسبًا البكسلات لحظيًا. لهذا يمكن عرض ملف SVG بأي مقاس — من أيقونة موقع بحجم 16x16 بكسل إلى لوحة إعلانية بطول 10 أمتار — دون أي فقدان للجودة.
ما مزايا صيغة SVG؟
- قابلة للتحجيم دون فقدان الجودة: كبّر أو صغّر كما تشاء، فالصورة تبقى حادّة في أي دقة، بما في ذلك شاشات Retina و4K.
- ملفات خفيفة: الشعارات والأيقونات البسيطة بصيغة SVG أصغر بكثير عادةً من نظيرتها بصيغة PNG، خصوصًا في المقاسات الكبيرة.
- قابلة للتعديل بالشيفرة: يمكنك تغيير الألوان والمقاسات والحركات مباشرة عبر CSS أو JavaScript، دون الحاجة إلى برنامج تحرير صور.
- قابلة للفهرسة في محركات البحث: لأن محتواها نص، يستطيع Google قراءة النصوص داخل ملف SVG وفهرستها.
- دعم الحركة: يمكن إنشاء حركات بـ CSS وSMIL داخل الملف نفسه، دون اللجوء إلى ملفات GIF أو فيديو.
- إتاحة أفضل: يمكن إضافة عناوين وأوصاف داخل ملف SVG لتقرأها برامج قراءة الشاشة.
ما حدود صيغة SVG؟
- لا تصلح للصور الفوتوغرافية: الصورة الفوتوغرافية تحوي ملايين التدرّجات اللونية المعقّدة، وتمثيل ذلك بالمتجهات ينتج ملفات ضخمة وغير عملية. تبقى JPG هي الخيار الصحيح للصور الفوتوغرافية.
- الرسوم المعقّدة تصبح ثقيلة: الرسوم شديدة التفصيل، بكثرة أشكالها وتدرّجاتها، قد تنتج ملفات SVG كبيرة وبطيئة في العرض.
- تعديلها يدويًا يحتاج خبرة: تحرير SVG من الشيفرة مباشرة يتطلب إلمامًا بـ XML وبأساسيات الرياضيات المتجهية، وأدوات مثل Illustrator وFigma تختصر هذا الطريق.
💡 قاعدة عملية: استخدم SVG للشعارات والأيقونات والرسوم التوضيحية والمخططات والخرائط وكل عمل فني يُعرض بمقاسات متعددة، واستخدم JPG أو WebP للصور الفوتوغرافية والصور الغنية بالتفاصيل والتدرّجات.
SVG وPNG وJPG — متى تستخدم كلًا منها؟
| الخاصية | SVG | PNG | JPG |
|---|---|---|---|
| النوع | متجهية | نقطية (بكسل) | نقطية (بكسل) |
| التحجيم دون فقدان | نعم | لا | لا |
| الشفافية | نعم | نعم | لا |
| مثالية للصور الفوتوغرافية | لا | لا | نعم |
| مثالية للشعارات والأيقونات | نعم | نعم | لا |
| قابلة للتعديل بـ CSS/JS | نعم | لا | لا |
| مدعومة في المتصفحات | نعم | نعم | نعم |
كيف تستخدم SVG في المواقع والتطبيقات
هناك ثلاث طرق أساسية لإدراج ملف SVG داخل صفحة ويب:
- داخل وسم
: أبسط الطرق. يُعامَل الملف كأي صورة أخرى، لكن لا يمكن التحكم فيه عبر CSS أو JavaScript.
- مضمّنًا داخل HTML: تُلصق شيفرة SVG داخل صفحة HTML نفسها، فتحصل على تحكم كامل عبر CSS وJS في الألوان والحركات والتفاعل. وهي الطريقة المفضّلة للأيقونات التفاعلية.
- كخلفية في CSS: باستخدام
background-image: url('icon.svg'). مفيدة للأيقونات الزخرفية، لكن التحكم فيها عبر JavaScript محدود.
كيف تحوّل الصور إلى SVG؟
يمكن تحويل صورة فوتوغرافية أو ملف PNG إلى SVG عبر عملية تُسمّى التحويل إلى متجهات، وهي تحويل البكسلات إلى أشكال هندسية. وتكون النتيجة أفضل مع الصور البسيطة قليلة الألوان وواضحة الحواف، مثل الشعارات ذات الخلفية البيضاء. ويتيح لك محوّل الصور من ImageTools تحويل ملفاتك بين أشهر الصيغ، بما في ذلك تحويل PNG وJPG إلى صيغ أخرى متوافقة مع الويب.
هل SVG مفيدة لتحسين محركات البحث؟
نعم. لأن SVG صيغة قائمة على النص، يستطيع Google الزحف إلى محتواها وفهرسته. ثم إن الشعارات والأيقونات بهذه الصيغة أصغر حجمًا من نظيرتها بـ PNG، فتصبح الصفحة أسرع — وسرعة الصفحة عامل ترتيب مباشر لدى Google منذ اعتماد مؤشرات Core Web Vitals.
ولتحسين ملفات SVG لمحركات البحث، أضف داخل الشيفرة الوسمين title و desc اللذين يعملان كنص بديل لبرامج قراءة الشاشة ولمحركات البحث.