أداة سريعة وخاصة لتحسين ملفات SVG
تُعد ملفات SVG (الرسومات المتجهية القابلة للتطوير) المعيار الأساسي للأيقونات والرسومات التوضيحية الواضحة والمستقلة عن الدقة على الويب. ولكن، عند تصدير ملف SVG من برامج التصميم، نادراً ما يكون الملف الناتج مُحسناً لبيئة الإنتاج. تتيح لك أداة تحسين ملفات SVG هذه تنظيف رسوماتك المتجهية فوراً، وإزالة البيانات الزائدة غير الضرورية، وتقليل حجم الملفات دون التأثير على جودة الصورة.
ولأن هذه الأداة تعمل بالكامل داخل متصفحك، فلن تُرفع رسوماتك إلى أي خادم على الإطلاق. لذا يمكنك ضغط ملفات SVG بأمان تام، حتى تلك التي تحتوي على شعارات خاصة، أو تصميمات لمنتجات لم تُطرح بعد، أو رسوم بيانية سرية. تتم عملية المعالجة لحظياً، مع عرض مباشر لمقدار المساحة التي تم توفيرها من حجم الملف، بالإضافة إلى مقارنة بصرية (قبل وبعد) لضمان بقاء رسوماتك سليمة تماماً.
لماذا تحتاج إلى ضغط ملفات SVG
على عكس الصور النقطية (مثل JPEGs أو PNGs) التي تخزن بيانات البكسل، تعتبر ملفات SVGs في الأساس ملفات نصية بتنسيق XML تحتوي على تعليمات رياضية لرسم الأشكال. وعندما تقوم برامج تحرير المتجهات بإنشاء هذه الملفات، فإنها غالباً ما تتضمن كمية هائلة من البيانات الزائدة التي لا تحتاجها المتصفحات لعرض الصورة.
من الأسباب الشائعة لتضخم حجم ملفات SVG:
- البيانات الوصفية للمحرر: الوسوم والسمات الخاصة بالبرنامج الذي أنشأ الملف، والتي تُستخدم لأغراض التحرير فقط.
- التعليقات والعناصر الفارغة: ملاحظات المطورين، والمجموعات الفارغة (
<g>)، والطبقات المخفية التي لا تساهم بشيء في الشكل المرئي النهائي. - الدقة المفرطة: إحداثيات المسار التي تحتوي على ستة منازل عشرية أو أكثر (مثل
14.123456)، والتي تستهلك بايتات دون داعٍ. - السمات الافتراضية: الأنماط والسمات التي تتطابق مع السلوك الافتراضي للمتصفح ولا يلزم تحديدها صراحةً.
باستخدام أداة تصغير SVG، يمكنك إزالة هذه النصوص المخفية. وعند تقليل حجم ملف SVG، يتم تحميل صفحات موقعك بشكل أسرع، وتستهلك نطاقاً ترددياً أقل، مما يحسن الأداء العام لموقعك وتصنيفاتك في محركات البحث (SEO).
كيفية تصغير حجم SVG عبر الإنترنت
توفر هذه الأداة عدة خيارات قابلة للتخصيص لمنحك تحكماً دقيقاً في عملية التحسين. بناءً على كيفية استخدامك للرسم النهائي، يمكنك تعديل هذه الإعدادات لتحقيق التوازن المثالي بين حجم الملف وقابلية قراءة الكود.
دقة الأرقام العشرية
تُرسَم مسارات المتجهات (Vector paths) باستخدام الإحداثيات. غالباً ما تقوم برامج التصميم بتصدير هذه الإحداثيات بدقة متناهية، مما يؤدي إلى سلسلة طويلة من الأرقام. من خلال تقليل دقة الأرقام العشرية (عدد المنازل العشرية)، يمكنك تقليل عدد الأحرف في ملفك بشكل كبير. عادةً ما تكون الدقة 1 أو 2 مثالية لأيقونات الويب. إذا لاحظت أن المنحنيات تبدو متعرجة أو أن الأشكال تتغير في المعاينة المرئية، فما عليك سوى زيادة شريط تمرير الدقة حتى تبدو الصورة صحيحة مرة أخرى.
التحسين متعدد التمريرات
غالباً ما تكون عملية التحسين عملية متعددة الطبقات. قد تؤدي إزالة عنصر واحد غير ضروري إلى جعل العنصر الأصل (parent element) فارغاً، والذي يمكن إزالته أيضاً. يؤدي تفعيل إعداد "التحسين متعدد التمريرات" (Multipass) إلى توجيه المُحسّن لتشغيل إجراءات التنظيف بشكل متكرر حتى لا يعود بالإمكان تقليل حجم الملف أكثر من ذلك. وهذا يضمن الحصول على أصغر حجم ممكن للملف الناتج.
إزالة الأبعاد
افتراضياً، يتم تصدير العديد من ملفات SVG بخصائص width و height ثابتة (مثل width="500px"). ورغم أن هذا يثبّت الصورة بحجم معين، إلا أنه يجعل تصميم الويب المتجاوب (responsive) أمراً صعباً. يؤدي تحديد خيار "إزالة الأبعاد" إلى حذف هذه الخصائص مع الحفاظ على viewBox. يتيح ذلك لملف SVG التمدد بسلاسة بناءً على كود CSS للحاوية الأصلية، مما يسهل استخدامه في تصميمات الويب الحديثة.
تنسيق الكود
إذا كان هدفك هو الحصول على أصغر حجم ممكن للملف، فاترك هذا الخيار غير محدد. ستُخرج الأداة الكود في سطر واحد كثيف. ومع ذلك، إذا كنت تقوم بتنظيف ملف SVG تخطط لتعديله يدوياً، أو تحريكه، أو تضمينه مباشرة في مستند HTML، فإن تحديد "تنسيق الكود" (Pretty print) سيقوم بتنسيق المخرجات بمسافات بادئة وفواصل أسطر مرتبة.
أفضل الممارسات للرسومات المتجهة
يعد تحسين ملفات SVG مجرد خطوة واحدة في بناء موقع ويب سريع ويسهل الوصول إليه. عند العمل مع الرسومات المتجهة، ضع في اعتبارك كيفية استخدامها. إذا كنت تقوم بتضمين ملف SVG مباشرة داخل كود HTML، فإن تصغير حجم ملف SVG يعد أمراً بالغ الأهمية لإبقاء حجم مستند HTML صغيراً. قد ترغب أيضاً في تمرير صفحتك بالكامل عبر أداة تصغير HTML أو أداة تصغير CSS للحصول على أقصى أداء.
تحقق دائماً من المعاينة المرئية بعد التحسين. رغم أن معظم ملفات SVG تُضغط بسلاسة، إلا أن الرسوم التوضيحية شديدة التعقيد التي تحتوي على تدرجات لونية متداخلة أو مسارات قص دقيقة قد تتطلب دقة عشرية أعلى للحفاظ على مظهرها الأصلي. تُسهل أداة العرض المدمجة للمقارنة بين "قبل وبعد" اكتشاف أي تغييرات غير مقصودة قبل تنزيل الملف المُصغَّر.
أخيراً، رغم أن ملفات SVG مثالية للشعارات والأيقونات والرسوم التوضيحية المسطحة، إلا أنها غير مناسبة للصور الفوتوغرافية المعقدة. إذا كان لديك ملف SVG يتكون أساساً من صور نقطية مضمنة (مثل صور JPEG المشفرة بصيغة base64)، فلن يكون للتحسين تأثير يذكر. في هذه الحالات، قد يكون من الأفضل تحويل الصورة بالكامل باستخدام أداة تحويل SVG إلى PNG.