ضغط SVG

ما الذي يضخّم حجم ملف SVG

افتح ملف SVG المُصدر من Figma في محرر النصوص وسترى عادةً:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

تقريبا كل سطر قابل للإزالة. يحتاج الإخراج المقدم فقط إلى svg وviewBox وpath.

ما يزيله المحسن

أمور يجب الانتباه لها

• لا تقم بإزالة المعرفات المشار إليها بواسطة CSS أو بواسطة url(#...) في عمليات التعبئة والأقنعة والمرشحات. يمكن للوضع العدواني كسر التدرجات.
• احتفظ بـ viewBox. بدونها، لن يتم تغيير حجم SVG بشكل مستجيب.
• احتفظ بـ <title> إذا كنت تعتمد عليه في إمكانية الوصول (تعلن قارئات الشاشة عن ذلك).
• تجنب انهيار مثيلات <use>. قد يقوم المحسن بتضمينها ويفقد نمط مصدر الحقيقة.

عندما يحفظ الضغط البايتات الحقيقية

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