ضغط SVG

كيف تعمل أداة ضغط SVG

ملف SVG المحفوظ من Illustrator أو Inkscape أو Figma أو Sketch يحمل عادة الكثير مما لا يستخدمه المتصفح أبدا: البيانات الوصفية للمحرر، والتعليقات، والطبقات المخفية، والقيم الافتراضية المكتوبة كاملة، والإحداثيات بثماني منازل عشرية أو أكثر. تزيل هذه الأداة كل ذلك باستخدام SVGO، أداة تحسين SVG مفتوحة المصدر التي تعتمد عليها معظم أدوات البناء وتطبيقات التصميم، لذا يبدو الرسم كما هو لكن الملف أصغر.

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

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

تُحمَّل أداة التحسين، وحجمها نحو 200 KB، في أول مرة تضغط فيها الزر. تُقرأ ملفات SVG الخاصة بك وتُعاد كتابتها داخل علامة التبويب هذه ولا تُرفع أبدا، وهذا مهم للشعارات التي لم تُطرح بعد وأعمال العملاء الفنية.

شرح خيارات ضغط SVG

متى تستخدمه

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

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

عن أداة تحسين SVG

SVGO، اختصار SVG Optimizer، هي الأداة مفتوحة المصدر التي تقف خلف تحسين SVG في معظم أدوات بناء الويب، وفي تطبيقات التصميم التي توفر تصديرا محسّنا. تحلل ملف SVG إلى شجرة، وتطبّق عليه مجموعة من خطوات التنظيف المختبرة جيدا وتعيد كتابته، مكررة ذلك حتى لا يبقى ما يمكن توفيره. كل خطوة تتخذها هنا تحافظ على مظهر الرسم كما هو، ولهذا يُوثق بإعداداتها الافتراضية في بيئات الإنتاج. تعمل النسخة المستخدمة في هذه الصفحة بالكامل في المتصفح، وتُحمَّل من شبكة jsDelivr CDN في أول مرة تستخدم فيها الأداة.

حل مشكلات ضغط SVG

«محسّن مسبقا؛ أُعيد دون تغيير»

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

تحرك جزء من الرسم أو انحنى

قد تنزاح الأيقونات الصغيرة جدا مع الدقة المنخفضة. اضغط الأصل مرة أخرى بدقة «عالية».

«ليس ملف SVG»

لا يحتوي الملف على رسم SVG. كذلك لا يمكن تصغير الملفات المصدّرة بصيغة SVG التي لا تفعل سوى تغليف صورة نقطية كثيرا؛ اضغط الصورة التي بداخلها بدلا من ذلك.

كيفية استخدام ضغط SVG، خطوة بخطوة

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

هل من الآمن فعل ذلك عبر الإنترنت؟

مع معظم الأدوات عبر الإنترنت، تعني عبارة «عبر الإنترنت» أن ملفك يُرفع إلى خادم شركة ما، ويُعالج هناك ويُحتفظ به فترة قبل حذفه. أما هنا فلا. تنزّل الصفحة شيفرة الأداة إلى متصفحك، ويُقرأ ملفك ويُعالج داخل علامة التبويب على جهازك أنت. لا يُرسل أبدا إلى TapToConvert ولا إلى أي جهة أخرى.

يمكنك التحقق من ذلك بنفسك: بعد تحميل الصفحة ومحركها، أوقف Wi-Fi وستظل الأداة تعمل. وهذا يعني أيضا أنه لا يوجد طابور انتظار ولا حد يومي ولا حد لحجم الملف يفرضه خادم؛ الحد الوحيد هو الذاكرة التي يمنحها متصفحك لعلامة تبويب واحدة.