كيفية تجهيز ملفات SVG وتحسينها للويب

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

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

من أين يأتي الحجم

المسارات هي أول المتهمين. كل عقدة تحمل إحداثيات، وكل إحداثي قد يُكتب بخمس منازل عشرية بعد الفاصلة. المسار الذي رسمته بالماوس يحتاج فعلياً منزلتين، والباقي ضجيج رقمي ينتقل إلى كل زائر.

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

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

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

المحور الأول: تقليل ما في الملف

هذا عمل تحرير لا سحر. ابدأ بحذف ما لا يُرى: مسارات فارغة، ومجموعات بلا محتوى، وتعاريف تدرج لم تُستخدم، وأسماء طبقات لا تفيد أحداً.

ثم قلّل دقة الأرقام. هنا مقايضة صريحة: منزلتان بعد الفاصلة تغيّران الهندسة تغيّراً طفيفاً جداً. في أيقونة صغيرة لا يُرى الفرق، وفي رسم بمساحة كبيرة قد يظهر انحراف بمقدار عُشر وحدة. القاعدة أن تتحقق بصرياً بعد كل تخفيض، لا أن تخفض إلى أقصى حد ثم تكتشف التشوه في المتصفح.

ثم وحّد ما يتكرر. ملف يستخدم اللون نفسه في ستين موضعاً يمكن أن يعرّفه مرة واحدة ويشير إليه، والفرق في الحجم يتبع عدد الاستخدامات لا مهارة المحرر.

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

المحور الثاني: الضغط أثناء النقل

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

هذا يعني أن أفضل تحسين في هذا المحور لا يحدث في الملف ولا في المحرر، بل في إعدادات الخادم. ومن يتحكم في ملفه ولا يتحكم في الخادم يبقى أمامه المحور الأول وحده.

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

فوائد تتجاوز الحجم

ملف SVG واحد يخدم ثلاثة مقاسات بدل ثلاثة ملفات PNG، وهذا يقلّل عدد الطلبات لا الحجم فقط. طلب واحد أسرع من ثلاثة في معظم الظروف.

كذلك يمكن استخدام الملف نفسه داخل الصفحة كنص، فتأتي الألوان من أنماط الصفحة ويتغير الشكل مع السمة الليلية دون ملف ثانٍ. هذه ميزة لا تعطيها الصيغ النقطية، لكنها تفرض شرطاً أمنياً.

السلامة قبل النشر

SVG ملف نصي يمكن أن يحتوي محتوى تنفيذياً. الملف القادم من مصدر غير موثوق لا يُدرج داخل الصفحة كما هو؛ يمر أولاً على تعقيم يزيل العناصر والسمات الخطرة.

هذه قاعدة لا تُفاوض عليها، خصوصاً مع الملفات المحمّلة من الإنترنت أو من طرف ثالث. الفتح في محرر لمعاينة الشكل لا يساوي التعقيم، ولا يُغني عنه.

قبل أن تنشر

صدّر ملفك من محرر المتجهات وافتحه في المتصفح على الحجم الحقيقي. تفحص الحواف والخطوط والتدرجات، ثم تفحص الحجم في أدوات الشبكة، ثم تتحقق أن الصور المدمجة ليست هي الثقل كله.

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

وللتفاصيل التي تسبق هذه المرحلة، من فتح الملف إلى تنزيله، راجع كيفية تعديل ملفات SVG عبر الإنترنت في المتصفح. وإن كان الأثر الذي تريد إصلاحه هو حدّة الحواف عند المقاسات الكبيرة، فـ كيفية تغيير حجم SVG دون فقدان الجودة يشرح القياسات والوحدات.