مُصغّر ومنظّف SVG

لماذا تحمل ملفات SVG وزنًا زائدًا

برامج التصميم تكتب SVG لنفسها أولًا. الشعار المصدّر من Illustrator أو Inkscape يحمل عادةً بيانات المحرر، وتعليقات، ومجموعات فارغة، وطبقات مخفية، ومعرّفات طويلة، وإحداثيات مكتوبة بست أو ثماني خانات عشرية، ولا شيء منها يغيّر مظهره. التصغير يعيد كتابة الملف بما يحتاجه المتصفح لرسمه فقط.

ما الذي قسناه

مرّرنا خمسة ملفات SVG عبر المصغّر بإعداداته الافتراضية:

تضغط خوادم الويب SVG أثناء الإرسال، لأنه نص، فينزّل الزوار أقل من حجم الملف. ومع ذلك يفيد التصغير بعد ذلك الضغط: انتقل الختم من 72.3 إلى 61.7 كيلوبايت مضغوطًا، والخريطة من 387.8 إلى 341.6 كيلوبايت.

الإعدادات

• دقة الأرقام تحدد كم خانة عشرية تحتفظ بها الإحداثيات. 3، الافتراضية، غير مرئية في كل شيء تقريبًا؛ و2 تناسب الأيقونات؛ واذهب أعلى فقط للرسوم الكبيرة جدًا التي تقع فيها أشكال صغيرة بعيدًا عن نقطة الأصل.
• إزالة البيانات الوصفية والتعليقات يحذف بيانات المحرر والعنوان والوصف. احتفظ بالعنوان إن كان SVG يُعرض وحده ويحتاج اسمًا يمكن الوصول إليه.
• الاحتفاظ بـviewBox يجب أن يبقى مفعّلًا: الـviewBox هو ما يتيح لـSVG أن يتغير حجمه. وإزالة العرض والارتفاع يترك حينها لـCSS تحديد الحجم.
• إزالة عناصر الأنماط يحذف كتل <style>. اتركه موقفًا ما لم تأتِ الألوان من CSS الخاص بك.
• مرات متعددة يكرر التحسين حتى لا يبقى ما يمكن إزالته. وتنسيق مقروء يضيف مسافات بادئة للنتيجة لقراءتها، على حساب الحجم.

تنقية SVG غير الموثوق

يمكن أن يحتوي SVG على سكربتات، تمامًا كصفحة ويب. إن وضعت SVG من شخص آخر على موقعك، فقد يعمل سكربت داخله في متصفحات زوارك. وتنقية، المفعّل افتراضيًا، يزيل السكربتات، ومعالجات الأحداث مثل onclick، وHTML المضمّن (foreignObject)، والمراجع إلى ملفات خارجية. تبقى الرسوم تعمل؛ ولا يُزال إلا المحتوى النشط، وتُدرج النتيجة ما أُخرج منها.

التحقق من النتيجة

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

إذا حدث خطأ

• تحركت أشكال صغيرة أو تبدو المنحنيات متعرجة. الدقة منخفضة جدًا لهذا الرسم. ارفعها إلى 4 أو 5.
• تغيّرت الألوان أو الخطوط. أُزيلت كتلة نمط أو فئة كان الرسم يعتمد عليها. أوقف إزالة عناصر الأنماط.
• توقفت حركة أو تفاعل عن العمل. كان سكربتًا، وتنقية تزيله. أوقف تنقية فقط للملفات التي تثق بها.
• يقول إن الشيفرة ليست SVG صالحًا. وسم لم يُغلق أو العنصر الجذري مفقود. تحقق من أنه نُسخ كاملًا، من <svg إلى </svg>.

كيف اختبرنا. خمسة ملفات SVG: أيقونة الكاميرا من Lucide، وشعار بسيط، وثلاثة ملفات في الملك العام من Wikimedia Commons. صُغّرت بالإعدادات الافتراضية لهذه الأداة في Chrome؛ وقيست الأحجام المضغوطة بـgzip.