محسّن SVG

حول هذه الأداة

تصف ملفات SVG (Scalable Vector Graphics) الأشكال والمسارات والنص باستخدام markup XML. غالباً ما تحتوي أدوات التصميم وتصدير CMS والأيقونات المكتوبة يدوياً على بيانات أكثر بكثير مما يحتاجه المتصفح لعرض الصورة نفسها. تحسين SVG هو عملية إزالة markup الزائد — التعليقات وبيانات المحرّر والمجموعات المكررة ودقة الإحداثيات غير الضرورية والسمات غير المستخدمة — مع الحفاظ على المخرجات المرئية متطابقة بأحجام العرض العادية. على عكس صيغ raster مثل PNG أو JPEG، يبقى SVG قابلاً للتحرير ومستقلاً عن الدقة بعد الضغط. قد تنخفض أيقونة محسّنة جيداً من 40 KB إلى 6 KB دون فقدان بكسل مرئي. التحسين ضروري للشعارات وأيقونات الواجهة والرسوم التوضيحية وfavicon التي تُحمّل في كل زيارة صفحة. الملفات الأصغر تعني تحميل صفحات أسرع ونطاقاً أقل على الشبكات المحمولة ودرجات Core Web Vitals أفضل. محركات البحث تكافئ الصفحات السريعة؛ يلاحظ المستخدمون عندما تظهر الأيقونات متأخرة أو تعيق العرض. تُدمج SVG المحسّنة بشكل أنظف في HTML ومكوّنات React وقوالب البريد حيث قد يُفسد markup المنتفخ المحللات أو يضخّم bundle. تشير مواقع الإنتاج إلى أيقونات SVG في خلفيات CSS أو وسوم <svg> inline أو عناصر img. كل kilobyte يساهم في مسار العرض الحرج، خاصة عند ظهور عدة أيقونات above the fold. إزالة المسافات البيضاء ودمج transform وإزالة doctype يقلل حجم النقل دون المساس بـ CSS أو JavaScript. إذا قدّمت favicon SVG عبر link rel="icon" type="image/svg+xml"، فالمتصفحات تخزّن بقوة — ملف نحيف يُحدّث أسرع عند إعادة العلامة. مشاريع React غالباً تستورد SVG كمكوّنات أو URLs. الملفات المصدرية المنتفخة تزيد وقت parse لحزمة JavaScript عندما يضمّنها loader كنص. قبل إضافة أيقونة إلى مكتبة المكوّنات، مرّرها عبر محسّن ليبقى tree-shaking وcode splitting فعّالين. عند لصق markup محسّن في ملف .svg أو pipeline SVGR، تأكد من بقاء viewBox — تطبيقات React تعتمد على viewBox للتحجيم المتجاوب. المتصفحات الحديثة تدعم favicon SVG المرتبطة من head المستند. تتدرج بوضوح على تبويبات Retina والاختصارات المثبتة إذا كان الملف صغيراً وصالحاً. يجب أن تكون favicon SVG مربعة وبpalette بسيطة وتتجنب المراجع الخارجية أو scripts لأسباب أمنية. بعد التحسين، حوّل إلى ICO أو PNG عند دعم shells Windows القديمة أو crawlers اجتماعية تتوقع raster. favicon SVG محسّن ملف master ممتاز لسير عمل حزمة favicon كاملة. يصدّر المصممون غالباً SVG بصور raster مضمّنة ودقة عشرية مفرطة في المسارات وأشكال متداخلة مكررة وكتل style يمكن تبسيطها كسمات. يضيف Illustrator أحياناً طبقات مسماة كعناصر group؛ تصدير Figma يتضمن xmlns وإحداثيات كسرية بست خانات عشرية. width وheight منسيان دون viewBox يفسدان التخطيط المتجاوب. طبقات مخفية وأقنعة قص نشطة تصدّر geometry غير مرئية تُحسب في حجم الملف. من Figma، استخدم Copy as SVG أو صدّر بـ Outline stroke عندما تستخدم الأيقونات strokes تُحوّل بشكل سيئ. ملفات Figma غالباً تتضمن fill-rule ومصفوفات transform على كل مجموعة؛ التحسين يدمج المسارات المجاورة عند الأمان. في Illustrator، اختر تصدير SVG Minify أو Responsive، عطّل تضمين الخطوط غير الضروري ووسّع appearance قبل التصدير. بعد التصدير، الصق markup في هذا المحسّن المبني على المتصفح. المعالجة محلية — أصول علامتك لا تُرفع أبداً إلى خادم. نزّل الملف النظيف أو انسخ النتيجة مباشرة إلى repo أو CMS أو pipeline مولّد favicon. ادمج المخرجات مع محوّل SVG إلى ICO أو SVG إلى PNG أو مولّد Favicon عند الحاجة إلى حزم متعددة الأحجام للإطلاق في الإنتاج.

الأسئلة الشائعة