- الصق الكود أو ارفع ملف SVG — الصق كود XML لملف SVG مباشرة في المحرر أو اسحب وأفلت ملف الرسوميات المتجهة (.svg) من جهازك.
- حدد خيارات التنظيف والتحسين — اختر قواعد التحسين المطلوبة: إزالة تعليقات XML، وحذف بيانات برامج التصميم (Adobe Illustrator, Inkscape)، وتفريغ المجموعات الفارغة.
- اضبط دقة الأرقام العشرية للمسارات — قلل خانات الأرقام العشرية لإحداثيات المنحنيات (مثل تقليلها من 6 خانات إلى خانتين عشريتين) لتقليص الحجم جذرياً دون أي تشوه بصري.
- صغّر أكواد التنسيق والأنماط — دمج خصائص CSS المتكررة وتحويل وسوم الأنماط الطويلة إلى سمات عرض مختصرة ونقية.
- عاين المقارنة البصرية المباشرة ونسبة التوفير — قارن بين التصميم الأصلي والمعدل جنباً إلى جنب مع استعراض حجم الملف قبل وبعد ونسبة التخفيض المحققة.
- انسخ أو نزّل ملف SVG المحسن — انسخ كود الرسم المتجه المحسن بنقرة واحدة لاستخدامه في تطوير الويب أو قم بتنزيل ملف .svg نظيف ومضغوط.
محسّن ملفات SVG — أداة احترافية لتنظيف وضغط الرسوميات المتجهة محلياً في المتصفح
تعد الرسوميات المتجهة القابلة للتطوير (SVG) المعيار القياسي الأمثل لتصميم الأيقونات والشعارات والرسوم التوضيحية للمواقع والتطبيقات الحديثة؛ بفضل قدرتها الفريدة على التمدد اللانهائي دون أي فقدان في حدة الوضوح على الشاشات فائقة الدقة (Retina و 4K). ومع ذلك، فعند تصدير الرسوميات من برامج التصميم الكبرى مثل Adobe Illustrator أو Inkscape أو Figma، تأتي الملفات محملة بأطنان من البيانات الوصفية المهدرة، والوسوم غير المرئية، والإحداثيات العشرية الطويلة، والتعليقات التي لا طائل منها، مما يثقل كاهل سرعة تحميل المواقع. يقدم محسّن ملفات SVG أداة برمجية متطورة وفائقة الأمان تعمل محلياً بالكامل داخل المتصفح لتنظيف وضغط أكواد SVG بنسبة تتراوح بين 30% إلى 75% مع الحفاظ التام على جودة المظهر الأصلي.
تتميز الأداة بالسرعة والخصوصية المطلقة؛ حيث لا تغادر ملفاتك وتصميماتك جهازك أبداً، وتوفر لك معاينة بصرية حية جنباً إلى جنب مع إحصائيات دقيقة لحجم الملف الأصلي والنهائي لمساعدتك في تسريع موقعك وتحسين تجربة المستخدم ومؤشرات أداء الويب.
تشريح الفضلات البرمجية في ملفات SVG: ما الذي يتم حذفه؟
يقوم المحرك الذكي للأداة بفحص شجرة XML للرسم المتجه وإزالة العناصر غير المرئية التالية:
- ترويسات XML والـ DOCTYPE غير الضرورية: وسوم التعريف الابتدائية التي لا يحتاجها متصفح الويب الحديث عند تضمين الرسوم في كود HTML5.
- بيانات برامج التصميم الاحتكارية (Namespaces): وسوم برمجية مثل
xmlns:iوinkscape:versionالتي تضعها برامج التصميم لتسجيل إعدادات الجلسة السابقة. - التعليقات وبيانات التوثيق (Metadata): نصوص التعليق وسجلات حقوق الملكية وتواريخ الإنشاء المحشوة في الكود.
- المجموعات الفارغة والحاويات غير المستغلة: وسوم المجموعات
<g>التي لا تحتوي على عناصر رسومية حقيقية أو التي تكرر خصائص موروثة. - اختصار إحداثيات المسارات (Path Quantization): تقليص الخانات العشرية الطويلة غير المجدية بصرياً مما يوفر آلاف البايتات في الرسوم المعقدة.
مقارنة بين تقنيات تحسين الرسوم المتجهة وضغط الصور النقطية
| وجه المقارنة | تحسين كود SVG المتجه | ضغط صور PNG النقطية | ضغط صور WebP و JPEG |
|---|---|---|---|
| طبيعة البيانات | أكواد ومعادلات رياضية متجهة | خريطة بكسلات لونية ثنائية الأبعاد | مصفوفات ترددية مضغوطة |
| آلية التحسين | تنظيف وسوم DOM واختصار الإحداثيات | تقليص لوحة الألوان وخوارزمية DEFLATE | ضغط كمومي مع إسقاط الترددات الدقيقة |
| التمدد وتغيير الحجم | تكبير لا نهائي بدون أي بكسلة | تبكسل وتشوه الصورة عند التكبير | فقدان الحدة وظهور تشوهات بصرية |
| نسبة تقليص الحجم | توفير 30% إلى 75% من الحجم الأصلي | توفير 20% إلى 50% من البايتات | توفير 40% إلى 80% من الحجم |
| التفاعل البرمجي | تعديل الألوان والأنماط بـ CSS و JS | صورة صامتة غير قابلة للتعديل | صورة صامتة غير قابلة للتعديل |
إحصائيات توفير الحجم عبر مختلف أنواع الرسوميات المتجهة
| نوع الرسم المتجه | برنامج التصدير الأصلي | الحجم قبل التحسين | الحجم بعد التحسين | نسبة التوفير (%) | الفارق البصري المحسوس |
|---|---|---|---|---|---|
| أيقونة واجهة مستخدم (24x24) | Figma | 4.2 كيلوبايت | 860 بايت | 79.5% توفير | 0.00% (تطابق تام) |
| شعار شركة رسمي (Logo) | Adobe Illustrator | 28.5 كيلوبايت | 6.4 كيلوبايت | 77.5% توفير | 0.00% (تطابق تام) |
| رسم توضيحي (Illustration) | Inkscape | 142.0 كيلوبايت | 48.2 كيلوبايت | 66.1% توفير | شبه معدوم (< 0.05%) |
| خريطة متجهة جغرافية | CorelDRAW / QGIS | 890.0 كيلوبايت | 310.0 كيلوبايت | 65.2% توفير | غير مرئي بالعين المجردة |
أفضل الممارسات لتوظيف رسومات SVG المحسنة في المواقع
- الموازنة في دقة الأرقام العشرية: للأيقونات البسيطة، يكفي اختيار خانة أو خانتين بعد الفاصلة. أما للخرائط المعقدة أو الخطوط الطباعية الدقيقة، فيفضل اختيار 3 خانات عشرية لمنع تشوه الزوايا الحادة.
- التضمين المباشر (Inline) للأيقونات الرئيسية: بالنسبة للشعار وأيقونات التصفح العلوية، قم بتضمين كود SVG المحسن مباشرة في كود HTML لتفادي طلبات الشبكة الإضافية وتسريع زمن استجابة الصفحة.
- تفعيل ضغط Gzip أو Brotli على الخادم: نظراً لأن ملفات SVG هي نصوص برمجية، فإن ضغط الخادم يخفض حجم نقلها عبر الشبكة بنسبة 60% إضافية.
- المحافظة على وسم viewBox: احرص دائماً على الإبقاء على خاصية viewBox وحذف العرض والارتفاع الثابتين لضمان تمدد الرسم وتجاوبه مع مختلف مقاسات الشاشات.
أدوات مطورين وضغط ذات صلة
استكمل تحسين وتجهيز أصول موقعك الرقمي عبر باقة أدواتنا المتطورة التي تعمل محلياً داخل المتصفح:
- ضاغط الصور — ضغط صور PNG و JPEG و WebP محلياً مع التحكم الكامل بنسب الجودة والأبعاد.
- مغير حجم الصور — تعديل أبعاد وقص وتحويل الصور النقطية بدقة وبدون خوادم.
- مولد رمز QR — إنشاء باركود ثنائي الأبعاد عالي الدقة للروابط والشبكات بصيغة فيكتور و PNG.
- محول حجم البيانات — تحويل وحدات التخزين الرقمية بدقة بين البايت والكيلوبايت والميجابايت والجيجابايت.