كيفية ضغط ملفات SVG وتنظيف بيانات تعريف XML دون فقدان الجودة

لماذا يتم تصدير ملفات SVG المتضخمة من Illustrator وFigma

تُعد الرسومات المتجهة القابلة للتحجيم (SVG) هي المعيار الذهبي لأيقونات الويب وعناصر الواجهة وشعارات العلامات التجارية نظرًا لأنها قابلة للقياس بشكل لا نهائي دون تشويش. ومع ذلك، فإن تصدير SVG مباشرةً من مجموعات تصميم سطح المكتب مثل Adobe Illustrator، أو CorelDRAW، أو Figma غالبًا ما ينتج عنه ملفات أكبر من الحجم اللازم بمرتين إلى أربع مرات.

تعطي تطبيقات التصميم الأولوية لإمكانية إعادة التحرير على كفاءة الشبكة. عند الحفظ، يقومون بتضمين:

• مساحات أسماء XML خاصة: علامات مثل ، ، و .
• أدلة المحرر غير المرئية: طبقات الشبكة وتعريفات المسطرة والطبقة المخفية الأقفال.
• عوامات الإحداثيات غير المقربة: النقاط المحددة لعشر منازل عشرية (على سبيل المثال، d=M 12.3481948271 45.9281749102").

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

ما هي عناصر XML التي يمكن إزالتها بأمان

لتحسين SVG للاستخدام الإنتاجي على الويب، حدد العناصر التي لا توفر أي قيمة عرض للمتصفح:

إحداثيات مسار التقريب: 3 أرقام عشرية مقابل 10 أرقام عشرية

تعريفات المسار () تمثل 80% إلى 90% من إجمالي عدد البايتات للملف المتجه. يتطلب الإحداثي الذي يحتوي على عشر منازل عشرية اثني عشر حرفًا من رموز ASCII:

<!-- Uncompressed path coordinate: 12 bytes -->
d="M 45.1849182049 82.9102847192"

التقريب إلى منزلتين عشريتين يقلل هذا العدد إلى خمسة أحرف فقط لكل نقطة:

<!-- Cleaned path coordinate: 5 bytes (58% byte reduction) -->
d="M 45.18 82.91"

في الشاشات ذات الدقة القياسية، تكون اختلافات البكسل الفرعي التي تتجاوز 0.01 بكسل غير مرئية فعليًا للعين البشرية.

خطوة بخطوة: ضغط ملفات SVG في متصفحك

باستخدام المعالجة من جانب العميل في ToolDolfen، يمكنك تحسين ملفات SVG محليًا دون تحميل أصول علامتك التجارية إلى خوادم سحابية تابعة لجهات خارجية:

1. افتح الأداة: قم بزيارة ضاغط الصور.
2. حدد المتجه الإدخال: قم بسحب وإفلات ملفات SVG في الواجهة.
3. تكوين التنظيف: تمكين تجريد مساحة اسم XML وتنسيقها التقريب.
4. تنزيل النتيجة الفورية: احفظ ملف SVG المصغر على الفور.

SVG مقابل WebP: متى يتم اختيار المتجهات فوق البيانات النقطية

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