Softonic

ضغط SVG

خطوة 1 / 2
التالي

عادةً ما يحمل ملف SVG الذي يتم تصديره من Figma أو Illustrator أو Sketch ترميزًا أكبر بمقدار 2-5 مرات مما يحتاج إليه: مساحات أسماء المحرر، والتعليقات، والمجموعات الفارغة، والتحويلات الزائدة، والإحداثيات المكونة من 6 أرقام عشرية. تقوم هذه الأداة بتشغيل SVG الخاص بك من خلال تمرير بنمط SVGO، مما يؤدي إلى إزالة التشويش مع الحفاظ على تطابق وحدات البكسل الناتجة.

كيفية ضغط ملف SVG

  1. 1

    قم بلصق أو تحميل SVG الخاص بك

    يقبل نص XML الخام أو ملف .svg.

  2. 2

    اختر مستوى التحسين

    آمن (إزالة التعليقات وبيانات تعريف المحرر)، أو عدواني (طي المجموعات، وتقريب الإحداثيات، ودمج المسارات)، أو مخصص.

  3. 3

    مراجعة الفرق

    قارن عدد البايتات قبل وبعد، وقم بمعاينة النتيجة المقدمة للتأكد من عدم تغيير أي شيء بصريًا.

  4. 4

    نسخ أو تنزيل

    الصق ملف 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.

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

تمت الإزالة لماذا آمنة
تعليقات XML لم يتم تقديمها أبدًا
مساحات أسماء المحرر (sketch، figma) لا تستخدمها المتصفحات
<title> / <desc> (اختياري) نص يمكن الوصول إليه، احتفظ به إذا كان ذا معنى
مجموعات <g> فارغة لا يوجد تأثير بصري
قيم السمات الافتراضية تستخدم المتصفحات الإعدادات الافتراضية على أي حال
تحويلات الهوية translate(0,0) لا يفعل شيئًا
إحداثيات الكسور العشرية 3 أرقام عشرية تبدو متطابقة على الشاشة
المعرفات غير المستخدمة احتفظ فقط بالمعرفات المشار إليها في مكان آخر

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

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

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

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

الأسئلة الشائعة

لن يكسرها الوضع الآمن. أما الوضع العدواني فقد يزيل المعرفات المشار إليها بواسطة الرسوم المتحركة في CSS أو SMIL - إذا كان SVG الخاص بك يحتوي على رسوم متحركة، فاستخدم الوضع الآمن أو أضف المعرفات يدويًا إلى القائمة البيضاء.

عادةً ما تتقلص صادرات Figma/Illustrator بنسبة 50-80%. تعد ملفات SVG المكتوبة بخط اليد مضغوطة بالفعل وعادةً ما تنخفض بنسبة 10-20% فقط.

افتراضيًا نعم، يتم الاحتفاظ بالسمات <title> و<desc> وaria-*. يمكنك اختيار تجريدها إذا كان SVG مزخرفًا بحتًا وكان HTML المحيط يوفر التسمية.

نعم. يتم الاحتفاظ بالسمة xmlns لأنها مطلوبة عند لصق SVG مباشرة في HTML. عادةً ما تكون ملفات SVG المضمّنة هي أسرع طريقة لتسليم الرموز الصغيرة.

أدوات ذات صلة

منشئ ورق المدرج الموسيقي

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

صانع فسيفساء LEGO

حوّل صورة إلى مخطط فسيفساء مربع من ١٦ أو ٣٢ أو ٤٨ خلية على كل ضلع. عاين الألوان التقريبية، واحسب القطع المسطحة ١×١، ونزّل دليل تجميع مرقماً.

مولد الورق المسطر

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

تحويل النص إلى خط اليد

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

منتقي ألوان Material Design

تصفح لوحة ألوان Material Design وانسخ أي درجة (من 50 إلى A700) بصيغة HEX أو RGB أو HSL بنقرة واحدة.

قارئ الرموز الشريطية

اختر صورة لرمز شريطي لعرض قيمته ونوعه. يدعم EAN-13 وUPC-A وCode 128، مع فحص رقم التحقق لرموز EAN وUPC.

الأداة متاحة بلغات أخرى