محسّن ملفات SVG
نظّف وصغّر كود SVG لتقليل حجم الملف وتسريع موقعك — مباشرة في المتصفح.
خانات أقل تعني ملفات أصغر مع فرق بصري لا يكاد يُلاحظ.
كل شيء يعمل في متصفحك. ملفاتك لا تُرفع أبداً.
ملفات SVG المُصدَّرة من أدوات التصميم أكبر دائمًا تقريبًا بمرتين لخمس مرات مما تحتاج، لأن المُصدِّر يحشو بيانات وصفية للمحرّر، ودقة زائدة، وتعليقات، وحشوًا غير مرئي لا يحتاجه المتصفح لعرض الصورة. SVG مجرد XML — نص يصف أشكالًا — فكل ذلك العبء يُشحن لكل زائر ويُبطئ الصفحة بلا فائدة بصرية. يجرّد هذا المُحسِّن الهدر مع حفظ النتيجة المعروضة بالضبط: يزيل البيانات الوصفية، ويقلّم المنازل العشرية المفرطة، وينظّف الترميز، قاطعًا حجم الملف كثيرًا عادةً، كله في متصفحك.
كيف يعمل المُحسِّن
الصق كود SVG أو ارفع الملف، ويحلّله المُحسِّن ويزيل ما لا يؤثر على العرض: تعليقات المحرّر وبياناته الوصفية، والمجموعات الفارغة، والخصائص الزائدة، والإحداثيات العشرية الطويلة بلا داعٍ. تبقى الصورة المرئية متطابقة بالبكسل بينما يتقلّص الملف. تستطيع رؤية الحجم قبل وبعد والكود المُنظَّف جنبًا لجنب. كل شيء يعمل محليًا — لا يُرفع SVG أبدًا، ما يهم للشعارات والأيقونات الخاصة.
ما يُزال
بيانات المحرّر <metadata>، أسماء نطاقات editor:
تعليقات <!-- Generator: ... -->
دقة زائدة d="M12.00000001" → "M12"
عناصر فارغة <g></g>، defs غير مُستخدَمة
خصائص زائدة قيم افتراضية، أنماط ميتة
مسافات بيضاء إزاحة، فواصل أسطر
البكسلات المعروضة: دون تغيير. حجم الملف: أصغر بكثير.أكبر فوز منفرد عادةً دقة الإحداثيات. أدوات التصميم تُصدّر بيانات المسار بدقة عشرية سخيفة — نقطة عند 12.000000001 بكسل — لكن الشاشة تعرض ببكسلات كاملة، فلا شيء بعد منزلتين أو ثلاث عشريتين مرئي أبدًا. تقريب تلك الدقة وحده قد يقطع ثلث حجم ملف أيقونة معقّدة بلا تغيير بصري. إزالة البيانات الوصفية الفوز السهل الآخر: تصدير Illustrator أو Figma قد يكون نصفه إعلانات تعليقات ونطاقات لا يقرؤها أي متصفح.
ما يجب معرفته عن تحسين SVG
- 1SVG نص، فيضغط ويُخزَّن مؤقتًا كالنص. هذه قوته الخارقة على الصيغ النقطية: SVG مُحسَّن يُضغط أكثر بـgzip على الخادم، يتوسّع لأي حجم بلا فقدان جودة، ويبقى حادًا على كل كثافة شاشة. للشعارات والأيقونات والرسوم البسيطة، SVG مُحسَّن جيدًا عادةً يتفوّق حتى على WebP.
- 2ضمّن SVG الحرجة مباشرةً في HTML لتوفير طلب. أيقونة صغيرة ملصوقة كـSVG مضمَّن تُحمَّل مع الصفحة ويمكن تنسيقها وتحريكها بـCSS، بلا جلب ملف منفصل. للأيقونات المُستخدَمة مرة، تضمين الكود المُحسَّن غالبًا أسرع من ربط ملف خارجي، وهذه الأداة تمنحك الكود النظيف للتضمين.
- 3التحسين آمن لأنه لا يلمس المخرج المعروض أبدًا. خلافًا لضغط الصور مع فقدان، تحسين SVG يزيل فقط البيانات التي يتجاهلها المتصفح — بيانات وصفية، دقة لا تستطيع أي شاشة عرضها، ترميز ميت. الصورة متطابقة رياضيًا بعد التحسين، فلا مقايضة جودة لموازنتها؛ إنه إزالة هدر صرفة.
- 4احذر التحسين المفرط الذي يكسر الحركات أو السكربتات. الأدوات العدوانية قد تزيل المعرّفات والخصائص التي يعتمد عليها CSS أو جافاسكربت لاستهداف العناصر. إن كان SVG متحركًا أو تفاعليًا، حسّن بتحفّظ واختبر، لأن المعرّف الذي يجرّده مُحسِّن كـ«غير مُستخدَم» قد يكون الخطاف الذي تعتمد عليه حركتك.
- 5بسّط العمل الفني قبل تحسين الكود. أكبر توفيرات SVG غالبًا تأتي من التصميم لا التصدير: عُقد أقل، مسارات مدمجة، وطبقات مخفية مُزالة تُصغّر الملف من المصدر. المُحسِّن ينظّف التصدير، لكن مسار بألف نقطة غير ضرورية يُصلَح أفضل في أداة التصميم قبل أن يصل للكود أصلًا.
الأسئلة الشائعة
هل تحسين SVG سيغيّر مظهره؟
لا. تحسين SVG يزيل فقط بيانات لا تؤثر على العرض — بيانات المحرّر الوصفية، والتعليقات، والترميز الميت، والدقة العشرية الأدق مما تستطيع أي شاشة عرضه. الصورة المرئية متطابقة رياضيًا قبل وبعد، وهو ما يجعل تحسين SVG مختلفًا جوهريًا عن ضغط الصور مع فقدان: لا مقايضة جودة. التحفّظ الوحيد SVG المتحرك أو المُبرمَج، حيث التحسين العدواني قد يزيل معرّفات يحتاجها كودك، فيجب تحسينها بحذر واختبارها.
لماذا SVG المُصدَّر لديّ كبير جدًا؟
لأن أدوات التصميم تُدرِج الكثير الذي لا يحتاجه المتصفح أبدًا: بيانات المحرّر الوصفية وإعلانات النطاقات، وتعليقات المولّد، والمجموعات الفارغة من بنية طبقاتك، وإحداثيات المسار بدقة عشرية أكثر بكثير مما تستطيع أي شاشة عرضه. شعار مُصدَّر من Illustrator أو Figma قد يكون بسهولة نصفه عبءًا. التحسين يجرّده كله، قاطعًا حجم الملف كثيرًا عادةً بلا تغيير للنتيجة المرئية.
هل SVG أفضل من PNG للشعارات والأيقونات؟
عادةً نعم. SVG مستقل عن الدقة، فيبقى حادًا تمامًا بأي حجم وعلى أي كثافة شاشة دون حاجة لنسخ متعددة، وSVG مُحسَّن غالبًا أصغر من PNG مكافئ للرسوم البسيطة. يمكن تنسيقه وتحريكه بـCSS أيضًا. PNG يفوز فقط للصور المعقّدة ذات الطابع الفوتوغرافي التي لا يستطيع SVG وصفها بكفاءة؛ للشعارات المسطّحة والأيقونات والرسوم، SVG المُحسَّن عادةً الخيار الأفضل.
هل يُرفع كود SVG لأي مكان؟
لا. التحسين يعمل كليًا في متصفحك، فيُعالَج SVG محليًا ولا يُرسَل أو يُسجَّل أو يُخزَّن. يمكنك التأكد بقطع الإنترنت؛ تواصل الأداة العمل. هذا يهم للشعارات الخاصة وأصول العلامات وأي أيقونة لا تريدها تغادر جهازك قبل نشرها.
هل أستطيع تحرير SVG بعد تحسينه؟
نعم، لكن قد يكون أقل ملاءمة. التحسين يزيل البيانات الوصفية الخاصة بالمحرّر وبنية الطبقات، فإعادة فتح SVG مُحسَّن في أداة تصميم تعمل لكنك تفقد الطبقات والمجموعات المسماة التي جعلت التحرير منظمًا. الممارسة الأفضل حفظ ملفك الرئيس الأصلي القابل للتحرير وتحسين النسخة التي تنشرها فقط — هكذا تحصل على مخرج نظيف للويب ومصدر قابل للعمل لتحريرات مستقبلية.