محسن SVG
-
الحجم الأصلي
-
الحجم المحسن
-
التوفير
لماذا يجب تحسين ملفات SVG؟
تحتوي ملفات SVG المصدرة من برامج مثل Illustrator أو Figma أو Inkscape على كميات هائلة من البيانات غير الضرورية - مثل التعليقات، والبيانات الوصفية للمحرر، والخصائص الزائدة، والأرقام العشرية الدقيقة للغاية، والحاويات الفارغة. هذه البيانات تضخم حجم الملف بنسبة 30-70% دون أي فائدة بصرية. ملفات SVG المحسنة يتم تحميلها بشكل أسرع، وتستهلك نطاقاً ترددياً أقل، وتندمج بشكل أنظف داخل كود HTML.
8 استراتيجيات تحسين
تحكم دقيق في كل عملية تحسين لاختيار ما تريد إزالته بالضبط.
إحصائيات تقليل الحجم
شاهد الحجم الأصلي، والحجم المحسن، ونسبة التوفير بعد كل عملية تحسين.
تحسين آمن
جميع عمليات التحسين تحافظ على المظهر البصري لملف SVG الخاص بك - يتم إزالة الضجيج فقط.
كيفية تحسين SVG في 3 خطوات
لصق كود SVG
انسخ كود SVG المصدري من أداة التصميم الخاصة بك وقم بلصقه في منطقة المدخلات.
اختيار خيارات التحسين
حدد خيارات التحسين التي تريد تطبيقها - أو استخدم الإعدادات الافتراضية لأقصى تقليل.
النسخ والاستخدام
انسخ كود SVG المحسن واستبدل ملفك الأصلي، أو قم بتضمينه مباشرة في HTML.
حالات استخدام تحسين SVG
مكتبات الأيقونات
تحسين مجموعات الأيقونات المصدرة من Figma قبل تجميعها في مكتبة أيقونات.
أصول الشعارات
تنظيف شعارات SVG المصدرة للاستخدام في ترويسات المواقع، والأيقونات المفضلة (Favicons).
ملفات SVG المتحركة
تقليل الحجم الأساسي للملفات المتحركة التي تكون ضخمة بالفعل بسبب بيانات الحركة.
تطبيقات PWA والجوال
ملفات SVG الأصغر تحسن أداء Lighthouse وتقلل استهلاك البيانات لمستخدمي الجوال.
أفضل ممارسات تحسين SVG
✓ كن حذراً عند إزالة المعرفات (IDs)
إذا كان ملف SVG الخاص بك يستخدم رسوم CSS أو JavaScript تستهدف معرفات العناصر، فاترك خيار 'إزالة المعرفات' غير مفعل.
✓ احتفظ بـ viewBox وأزل العرض/الارتفاع
إزالة خصائص العرض والارتفاع والحفاظ على viewBox يجعل SVG يتوسع بشكل مستجيب عبر CSS، وهو النهج الأفضل للتصميم المتجاوب.
✓ تقريب الأرقام إلى منزلتين عشريتين
الإحداثيات ذات 5 منازل عشرية أو أكثر غير محسوسة بَصَرياً. تقريبها لمنزلتين يقلل الحجم بشكل كبير دون أي فرق بَصَري.
✓ الأتمتة عبر CI/CD
للمشاريع الكبيرة، ادمج أدوات مثل SVGO في خط أنابيب البناء الخاص بك لتحسين جميع الملفات تلقائياً عند الرفع (Commit).
❓ الأسئلة الشائعة
كم يبلغ مقدار تقليل الحجم الذي أحصل عليه؟
عادة بين 30-70% حسب المصدر. الملفات القادمة من Illustrator توفر أكبر قدر من التوفير. أهم التوفيرات تأتي من إزالة بيانات المحرر والتعليقات وتقريب الأرقام.
هل سيغير التحسين مظهر ملف SVG الخاص بي؟
لا - جميع خيارات التحسين في هذه الأداة تزيل البيانات غير المرئية فقط. المظهر البصري يظل متطابقاً تماماً مع الملف الأصلي.
لماذا يجب عليّ إزالة العرض والارتفاع؟
العرض والارتفاع الثابتان يمنعان SVG من التمدد بشكل مستجيب (Responsive). بإزالتهما والحفاظ على viewBox، يمكنك التحكم في الأبعاد بالكامل عبر CSS.
ما الفرق بين هذه الأداة و SVGO؟
SVGO هي أداة سطر أوامر مبنية على Node.js ومعيار في الصناعة. توفر هذه الأداة واجهة بصرية مريحة عبر المتصفح لأشهر التحسينات دون الحاجة لتثبيت أي برمجيات.