شرح تحسين SVG: كيف تخضع رسومياتك المتجهة لحمية غذائية

في جملة واحدة

تحسين SVG هو عملية إعادة كتابة كود XML الخاص بملف SVG بشكل خوارزمي ليكون أصغر وأكثر كفاءة قدر الإمكان دون تغيير شكل الصورة النهائية.

المشكلة التي يحلها

في قديم الزمان، في مملكة الويب المبكسلة، كان لدينا نوعان رئيسيان من الصور: GIF للرسوم المتحركة البسيطة والشعارات، و JPEG للصور الفوتوغرافية. كانت هذه الصور نقطية (raster)، أي أنها عبارة عن شبكات من البكسلات. كبّرها، وستحصل على فوضى من المربعات.

ثم جاء SVG، أو الرسوميات المتجهة القابلة للتحجيم (Scalable Vector Graphics). هو معيار من W3C يصف الصور باستخدام الرياضيات—خطوط، منحنيات، أشكال، وألوان—كلها مكتوبة في ملف نصي بصيغة XML. هذا يعني أنه يمكنك تكبير صورة SVG بحجم لوحة إعلانية، وستبقى واضحة تمامًا. لقد كانت ثورة للشعارات والأيقونات والرسوم التوضيحية على الويب.

ولكن هنا تكمن المشكلة: البرامج المستخدمة لإنشاء ملفات SVG هذه (مثل Adobe Illustrator أو Inkscape أو Figma) ليست مصممة لأداء الويب. إنها مصممة للمصممين. هذه الأدوات تحشو ملف SVG بأطنان من المعلومات الإضافية: بيانات وصفية (metadata) عن المحرر، طبقات مخفية، تعليقات، تنسيق مقروء للبشر مع الكثير من المسافات البيضاء، وأوصاف أشكال معقدة بشكل مفرط. ملف SVG لأيقونة بسيطة قد يكون حجمه 20 كيلوبايت بينما يمكن بسهولة أن يكون 2 كيلوبايت.

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

كيف تعمل الآلية من الداخل

لفهم عملية التحسين، عليك أولاً أن تتقبل حقيقة أساسية: ملف SVG ليس صورة حقيقية. إنه مستند نصي يصف صورة. وكما هو الحال مع أي كود، يمكن أن يكون فوضويًا، أو يمكن أن يكون نظيفًا.

في النهاية، هو مجرد XML

في جوهره، ملف SVG هو مجرد XML (لغة الترميز القابلة للامتداد). يمكنك فتحه في محرر نصوص وقراءته. دائرة حمراء بسيطة قد تبدو هكذا:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- This is a comment we can remove -->
  <metadata>
    <rdf:RDF>
      <!-- Lots of editor metadata goes here -->
    </rdf:RDF>
  </metadata>
  <g id="layer1">
    <circle
       style="fill:#ff0000;stroke-width:0"
       id="path31"
       cx="50"
       cy="50"
       r="45" />
  </g>
</svg>

ينظر المحسِّن (optimizer) إلى هذا الكود ليس كصورة، بل كبرنامج يحتاج إلى إعادة هيكلة (refactoring).

إزالة الأشياء غير الضرورية

الخطوة الأولى والأسهل هي إزالة كل ما لا يساهم في البيكسلات النهائية على الشاشة.

التعليقات:  هي للبشر، وليس للمتصفحات. طارت.
البيانات الوصفية (Metadata): قسم <metadata> مليء بالمعلومات حول التطبيق المنشئ، المؤلف، التاريخ، إلخ. لا فائدة منه في العرض. طار.
البيانات الخاصة بالمحرر: تضيف العديد من المحررات سمات وعناصر خاصة بها (مثل inkscape:groupmode أو sodipodi:docname). المتصفح يتجاهلها. طارت.
Doctype وتصريح XML: تصريح <?xml ... ?> عادة ما يكون غير ضروري عند استخدام SVG على الويب. و <doctype> نادرًا ما يكون مطلوبًا. طارا.
التعريفات غير المستخدمة: يمكن أن يحتوي قسم <defs> على تدرجات أو أنماط أو فلاتر غير مستخدمة فعليًا في الصورة. يمكن للمحسِّن اكتشاف هذه العناصر "اليتيمة" وإزالتها.

تصغير البنية والخصائص

بعد ذلك، يقوم المحسِّن بترتيب البنية نفسها.

إزالة المسافات البيضاء: كل الأسطر الجديدة والمسافات البادئة التي تجعل الكود مقروءًا للبشر هي بايتات مهدرة بالنسبة للمتصفح. يتم إزالتها جميعًا.
طي المجموعات: المجموعات الفارغة (<g></g>) لا فائدة منها. المجموعات التي لا تحتوي على سمات خاصة (<g><circle.../></g>) يمكن غالبًا تسطيحها، بسحب الدائرة للخارج وحذف المجموعة.
تحويل الأنماط: يمكن تحويل style="fill:#ff0000; stroke:none" إلى سمات فردية: fill="red" stroke="none". في بعض الأحيان، يكون هذا أقصر. يتحقق المحسِّن من أيهما أكثر إيجازًا. قد يلاحظ أيضًا أن #ff0000 هو نفسه الكلمة المفتاحية red، وهي أقصر ببايت واحد.

بعد هذه الخطوات، قد يبدو SVG الخاص بدائرتنا هكذا:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="red" cx="50" cy="50" r="45"/></svg>

انظر إلى ذلك! لقد أصبح أصغر بكثير بالفعل ولكنه يرسم نفس الصورة تمامًا.

سحر تبسيط المسارات

هنا يحدث التوفير الأكثر إثارة للإعجاب. يتم تعريف معظم الأشكال المعقدة في SVG بواسطة عنصر <path>، الذي يحتوي على سمة d تحتوي على لغة مصغرة من أوامر التحريك (M)، والخط (L)، والمنحنى (C)، والإغلاق (Z).

قد يبدو المسار من أداة تصميم كما يلي: d="M 10.12345,20.54321 C 30.98765,40.11111 60.55555,40.22222 80.43210,20.32109"

يقوم المحسِّن بعدة حيل هنا:

تقليل الدقة: هل تحتاج حقًا إلى خمسة أرقام عشرية لإحداثي في صورة 100x100؟ لا. يمكن للمحسِّن تقريب هذه الأرقام إلى دقة معقولة (على سبيل المثال، منزلتين عشريتين)، مما يوفر الكثير من البايتات. 10.12345 تصبح 10.12.
الأوامر النسبية: تأتي أوامر المسار بنوعين: مطلقة (حرف كبير L) ونسبية (حرف صغير l). غالبًا ما تؤدي الأوامر النسبية إلى أرقام أصغر وسلسلة مسار أقصر.
تحويل الأشكال: يمكن للمحسِّن تحليل <path> ويدرك، "انتظر، هذا المسار يصف مستطيلًا مثاليًا!" سيقوم بعد ذلك بتحويل سلسلة <path> الطويلة إلى عنصر <rect> أقصر بكثير.
ملاءمة المسار: باستخدام خوارزميات ذكية (مثل Ramer-Douglas-Peucker)، يمكن للمحسِّن تحليل سلسلة من مقاطع الخطوط المستقيمة القصيرة في مسار واستبدالها بمنحنى واحد ناعم لا يمكن تمييزه بصريًا، ولكنه يستخدم عددًا أقل بكثير من الأحرف لوصفه.

من ملف إلى Data URI

أخيرًا، بمجرد أن يصبح SVG صغيرًا قدر الإمكان، قد لا ترغب في حفظه كملف على الإطلاق. يمكن للمحسِّن تحويل نص SVG المصغر بأكمله إلى سلسلة واحدة تسمى Data URI. يتيح لك هذا تضمين الصورة مباشرة في HTML (<img src="data:image/svg+xml,...">) أو CSS (background-image: url("data:image/svg+xml,...");). هذا يوفر طلب شبكة كامل، مما يمكن أن يجعل موقعك يبدو أسرع.

قصص من أرض الواقع

قضية الشعار المتضخم

أنهت شركة ناشئة للتو عملية إعادة تسمية تجارية كبرى وحصلت على شعار جديد أنيق من وكالة التصميم. أسقط المطور ملف logo.svg على الصفحة الرئيسية. بدا رائعًا. لكن حجم الملف كان 45 كيلوبايت. لشعار واحد! فتحوه ووجدوه مليئًا بالتعليقات، وطبقات الإرشادات المخفية، وإحداثيات مسارات بثمانية منازل عشرية. بعد تمريره عبر محسِّن، تقلص حجمه إلى 4 كيلوبايت فقط - انخفاض بنسبة 90٪. تحسنت نتيجة Largest Contentful Paint (LCP) للصفحة الرئيسية على الفور، خاصة للمستخدمين على شبكات الهاتف المحمول.

الدرس المستفاد: الأصول من أدوات التصميم هي نقطة بداية، وليست منتجًا نهائيًا للويب. افترض دائمًا أنه يمكن تحسينها.

الأيقونة المتحركة التي كانت تتعثر

كان مطور واجهة أمامية يبني مجموعة من الأيقونات التفاعلية التي تتحرك عند التمرير. أيقونة واحدة، عجلة مسننة معقدة، كانت تتسبب في تقطع الصفحة أثناء الرسوم المتحركة لدورانها. باستخدام أدوات المطور في المتصفح، رأى أن المتصفح كان يعاني باستمرار من "إعادة الطلاء" (repainting). تفحص كود SVG ووجد أن العجلة المسننة مكونة من عشرات من عناصر <path> المنفصلة، كلها متداخلة داخل عدة وسوم مجموعة <g>. قام المحسِّن بدمج المجموعات، والأهم من ذلك، دمج جميع المسارات المنفصلة في مسار مركب واحد. أصبح عنصر DOM الناتج أبسط بكثير. كان لدى المتصفح عمل أقل بكثير للقيام به، وأصبحت الرسوم المتحركة سلسة للغاية.

الدرس المستفاد: تحسين SVG لا يتعلق فقط بحجم الملف؛ بل يتعلق بأداء العرض. بنية SVG أبسط تعني عملاً أقل لمحرك العرض في المتصفح.

ورطة مكتبة الرسوم البيانية

كان فريق تحليلات البيانات يستخدم مكتبة JavaScript قوية لإنشاء مخططات ورسوم بيانية معقدة للوحة التحكم الخاصة بهم. المشكلة؟ كان كل مخطط عبارة عن SVG، وكانت المكتبة تنشئها ديناميكيًا في متصفح المستخدم. لوحة التحكم، التي تحتوي على خمسة مخططات، كانت تقوم بتنزيل المكتبة ثم توليد ما يقرب من 1 ميغابايت من كود SVG غير المحسن، مما يؤدي إلى تجميد المتصفح لثوان. كان الحل هو نقل إنشاء المخططات إلى الخادم. أنشأوا خدمة صغيرة تقوم بتوليد كود SVG باستخدام Node.js، ثم تمرير السلسلة الناتجة عبر مكتبة تحسين SVG، ثم إرسال SVG الصغير والمحسن مسبقًا إلى العميل. تم تقليل وقت تحميل لوحة التحكم بنسبة 75٪.

الدرس المستفاد: يمكن ويجب أن يكون التحسين جزءًا من عملية بناء آلية أو سير عمل في الواجهة الخلفية، وليس مجرد خطوة يدوية للأصول لمرة واحدة.

أخطاء وفخاخ شائعة

كسر التفاعلية عن طريق إزالة المعرفات (IDs): العديد من المحسنات تزيل معرفات العناصر بقوة لتوفير البايتات. إذا كان لديك JavaScript أو CSS يستهدف هذه المعرفات (على سبيل المثال، document.getElementById('my-button-shape'))، فسوف يتعطل الكود الخاص بك. تأكد من تكوين المحسِّن الخاص بك للحفاظ على المعرفات التي تحتاجها.
التبسيط المفرط للمسارات: ضبط إعداد "الدقة" على قيمة منخفضة جدًا يمكن أن يشوه صورتك بشكل واضح. قد يصبح المنحنى خطًا متعرجًا، أو قد تختفي التفاصيل الدقيقة. قارن دائمًا بصريًا بين النسخة الأصلية والمحسنة للتأكد من عدم التضحية بالجودة.
إزالة ميزات الوصولية (accessibility): توفر وسوم <title> و <desc> داخل SVG بديلاً نصيًا لقارئات الشاشة. قد يزيلها المحسِّن الساذج باعتبارها "غير ضرورية". الأدوات الجيدة لديها خيار للحفاظ على هذه الوسوم للحفاظ على الوصولية.
فقدان معلومات ورقة الأنماط: يمكن أن تحتوي ملفات SVG على كتل <style>، تمامًا مثل HTML. إذا كنت تستخدم فئات (classes) لتصميم أجزاء مختلفة من SVG الخاص بك، فتأكد من أن المحسِّن لا يزيل كتلة النمط أو يتلف أسماء الفئات التي تعتمد عليها.

لماذا يجب أن تضعه على رادارك

في عصر مؤشرات أداء الويب الأساسية (Core Web Vitals) والفهرسة التي تعطي الأولوية للجوال، لم يعد أداء الموقع ترفًا؛ بل هو مطلب. كل كيلوبايت مهم. ملفات SVG موجودة في كل مكان على الويب الحديث - الشعارات، الأيقونات، الرسوم التوضيحية الرئيسية، تصورات البيانات. إنها واحدة من أكبر مصادر المكاسب السهلة في الأداء.

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

للتعمق أكثر

MDN Web Docs: SVG Tutorial - نقطة البداية النهائية لتعلم ما هو ممكن مع SVG.
W3C Scalable Vector Graphics (SVG) 2 Specification - المواصفات الفنية الرسمية. إنها كثيفة، لكنها مصدر الحقيقة.
SVG on Wikipedia - نظرة عامة رائعة وعالية المستوى على تاريخ التنسيق وقدراته وتفاصيله الفنية.
A Practical Guide to SVGs on the web (CSS-Tricks) - مجموعة كلاسيكية من المقالات والأدلة التي تغطي جميع جوانب استخدام SVG في بيئة الإنتاج.
SVGO (SVG Optimizer) - المحرك وراء العديد من أدوات التحسين الشائعة. قراءة وثائق إضافاته تمنحك فهمًا عميقًا لجميع تقنيات التحسين الممكنة.