ملف SVG كبير الحجم؟ ثماني نصائح للضغط والتحسين

غالبًا ما يبلغ ملف SVG مئات الكيلوبايتات أو حتى بضعة ميغابايت، وذلك بسبب كثرة نقاط التثبيت وفواقد المسارات وبيانات المحرر ودقة الكسور العشرية العالية. تأتي النصائح الثماني أدناه مرتبة من «المصدر» إلى «التسليم»، وكلها قابلة للتطبيق.

أولًا: على مستوى المسار: قلّل نقاط التثبيت وادمج المسارات

التقنية 1: تقليل نقاط التثبيت (تبسيط المسار)

كلما زادت نقاط التثبيت كبر الملف وبطأ العرض. ارفع نعومة الحواف قليلًا عند التحويل لتقلّل نقاط التثبيت من المصدر؛ وللملفات الموجودة يمكن تقليل النقاط الزائدة عبر «كائن ← مسار ← تبسيط» في Illustrator أو «المسار ← تبسيط» (Ctrl+L) في Inkscape. وفي أداة التحويل من PolySVG يمكنك ضبط النعومة وعدد الألوان لتوازن بين الأثر والحجم مباشرة.

التقنية 2: دمج المسارات والطبقات

ادمج المسارات ذات لون التعبئة نفسه في مسار واحد لتقليل الخصائص المكررة، وافرد التداخلات غير ذات المعنى، واحذف الطبقات المخفية والعناصر الفارغة. داخل برامج التصميم يمكنك استخدام «الاتحاد» في أداة المسارات أو دمج الطبقات قبل التصدير.

ثانيًا: داخل الملف: احذف البيانات الوصفية وخفّض الدقة

التقنية 3: إزالة بيانات المحرر الوصفية

غالبًا ما تحمل ملفات SVG المصدَّرة من Illustrator وInkscape مساحات أسماء المحرر و<metadata> والتعليقات وإعدادات التصدير، وكلها لا تؤثر في العرض، فاحذفها يدويًا أو اتركها لـ SVGO لتنظيفها تلقائيًا. وانتبه لإبقاء <title> و<desc> لأنهما مفيدان لإمكانية الوصول.

التقنية 4: خفض دقة الكسور العشرية

غالبًا ما تحمل إحداثيات المسارات ست إلى ثماني خانات عشرية، بينما يحتاج عرض الشاشة إلى خانة أو خانتين. اضبط دقة الأرقام (floatPrecision) على 1-2 في إعدادات SVGO، فينخفض الحجم بوضوح دون فرق يُرى بالعين. وانتبه للأيقونات الصغيرة جدًا فلا تضغط الإحداثيات أكثر من اللازم حتى لا يتشوّه الشكل.

ثالثًا: الأتمتة: ضغط بنقرة عبر SVGO

التقنية 5: التحسين التلقائي عبر SVGO

‏SVGO هو الأداة المرجعية لتحسين SVG، وفيها عشرات الإضافات: إزالة التعليقات والبيانات الوصفية، ودمج المسارات، وتحسين أوامر المسار، وتنظيف الأرقام. والاستخدام الأساسي:

npx svgo input.svg -o output.svg

يمكن أن ينخفض حجم الملف المعتاد بنسبة 30%-70%. وانتبه لنقطتين: لا تحذف خاصية viewBox وإلا اختل التكبير؛ وإذا كانت الأيقونات ستُلوَّن بـ CSS فاحتفظ بوراثة fill ولا تثبّت اللون.

قارن حجم الملف قبل التحسين وبعده مع حجم النقل الفعلي في أدوات المطوّر داخل المتصفح، لتتأكد من المكسب؛ وغيّر نوعًا واحدًا من المعاملات في كل مرة، فإذا ظهر خلل يكون تحديد مصدره سهلًا.

رابعًا: البنية وإعادة الاستخدام: التوحيد وضبط الطبقات

التقنية 6: إعادة استخدام الرسوم المكررة عبر defs وuse

إذا ظهرت الأيقونة نفسها في الصفحة عدة مرات، عرّفها مرة واحدة داخل <defs> واستدعها بعدة <use>، أو اجمعها في صورة واحدة (sprite)، فينخفض الحجم وعدد الطلبات معًا.

التقنية 7: ضبط طبقات الألوان وتجنّب تضمين الصور النقطية

خفّض عدد الألوان عند التوجيه لتقليل طبقات اللون؛ واستخدم اللون الصلب بدل التدرجات المعقدة كلما أمكن. وتجنّب خصوصًا تضمين صور نقطية بصيغة base64 داخل SVG، لأن ذلك يحوّل الملف المتجهي إلى حامل لصورة نقطية فيتحكم في الحجم. ويمكن حذف المسارات الزائدة المتبقية من التحويل بالنقر عليها في المحرر عبر الإنترنت.

خامسًا: التسليم: ضغط النقل والتخزين المؤقت

التقنية 8: تفعيل gzip/Brotli والتخزين المؤقت

SVG نص، فمع تفعيل gzip/Brotli على الخادم ينخفض حجم النقل عادة بنسبة إضافية تتراوح بين 60% و80%؛ واضبط ترويسات تخزين مؤقت طويلة للملفات الثابتة. أما الأيقونات الصغيرة جدًا فيمكن تضمينها مباشرة داخل HTML، فيُوفَّر الطلب. أما المبدأ في مزايا SVG؛ ولمن أراد التحكم في الحجم منذ مرحلة التحويل فليقرأ طرق تحويل الصور إلى SVG.

الترتيب مهم: ابدأ من المصدر بضبط نقاط التثبيت وطبقات اللون، ثم نظّف الملف من البيانات الوصفية والدقة، ثم طبّق SVGO، وأخيرًا اضغط النقل. وبجمع الطبقات الأربع معًا ينخفض حجم SVG عادة بمقدار رتبة كاملة.