Utilia
الفئات ▾
اللغة: ar ▾

ضغط وتحسين ملفات SVG

حسّن ملفات SVG واضغطها أونلاين باستخدام SVGO في متصفحك. اختر إعدادًا مسبقًا، وقارن النتيجة بصريًا، واطّلع على التوفير في الحجم وبعد gzip.

الإضافات

إزالة viewBox تمنع الرسم من التكيّف مع الحجم، وتقصير المعرّفات أو إزالتها يعطّل CSS وJavaScript وعناصر <use> وروابط المراسي التي تشير إليها. استخدم الإعداد «آمن» لملفات SVG المستخدمة في الشيفرة أو الـ sprites أو الحركات.

كيفية تحسين ملف SVG

  1. أفلت ملف SVG في منطقة الإفلات أو انقر عليها لاختياره. ويمكنك أيضًا لصق الشيفرة في مربع شيفرة SVG.
  2. اختر الإعداد المسبق: آمن أو متوازن (الافتراضي) أو أقصى. تبيّن قائمة الإضافات أدناه بالضبط الخطوات التي يفعّلها كل إعداد.
  3. عدّل عند الحاجة: الدقة العشرية (من 0 إلى 8 خانات)، وتمريرات متعددة، وتنسيق مقروء (إخراج بمسافات بادئة) إن أردت شيفرة سهلة القراءة. وبمجرد تغيير إضافة أو الدقة أو التمريرات، يتحول الإعداد المسبق إلى مخصص.
  4. انقر تحسين SVG. يُحسَّن الملف المُفلت فورًا، وبعد ظهور النتيجة، يعيد كل تغيير في الإعدادات تشغيل التحسين تلقائيًا.
  5. راجع أرقام الحجم الأصلي والحجم بعد التحسين والتوفير وبعد gzip، ثم قارن الرسمين جنبًا إلى جنب.
  6. انقر نسخ لنسخ شيفرة SVG المحسَّنة، أو تنزيل SVG المحسَّن لحفظها باسم name.min.svg.

يتولى التحسين SVGO 4، أداة تحسين SVG القياسية مفتوحة المصدر (MIT) المستخدمة في معظم أدوات بناء الويب. تُحمَّل نسختها الخاصة بالمتصفح عند أول نقرة، وتعمل بالكامل على جهازك: لا يُرفع ملف SVG الخاص بك أبدًا.

لماذا ملفات SVG المصدَّرة من برامج التصميم ثقيلة إلى هذا الحد

يحمل ملف SVG المصدَّر من Illustrator أو Inkscape أو Figma أو Sketch أكثر بكثير من الرسم. تضيف المحررات فضاءات أسماء وسمات خاصة بها (أسماء الطبقات، والأدلة، وإعدادات التصدير)، وكتلة <metadata>، وتعليقات مثل «Generator: Adobe Illustrator»، وإحداثيات بست خانات عشرية أو أكثر، ومجموعات لا تحتوي إلا عنصرًا واحدًا، وألوانًا مطوّلة مثل #ffffff. ولا شيء من هذا يغيّر ما يرسمه المتصفح. يزيل SVGO كل ذلك، ويقرّب الأرقام، ويعيد كتابة بيانات المسارات بأوامر أقصر، ويقصّر الألوان، ويدمج العناصر الزائدة أو يفكّ تغليفها. والتخفيض بنسبة 40–60 % شائع في الأيقونات والرسوم المصدَّرة.

الإعدادات المسبقة والإضافات الخطرة

  • آمن يشغّل الإعداد الافتراضي لـ SVGO لكنه يحتفظ بالمعرّفات و<desc> والمسارات المنفصلة وقواعد <style>، بثلاث خانات عشرية وتمريرة واحدة. استخدمه لملفات SVG المشار إليها من CSS أو JavaScript، وللـ sprites والحركات.
  • متوازن هو الإعداد الافتراضي لـ SVGO، بثلاث خانات عشرية وتمريرات متعددة. ويناسب معظم الأيقونات والرسوم المعروضة كصور.
  • أقصى يضيف إزالة </strong> و<strong>إزالة النصوص البرمجية وسمات الأحداث</strong> و<strong>إزالة width/height (مع الإبقاء على viewBox)</strong> و<strong>استبدال xlink:href بـ href</strong>، بخانتين عشريتين وتمريرات متعددة.</li> </ul> <p>لا يزيل أي إعداد مسبق الـ viewBox. فخيار <strong>إزالة viewBox</strong> موجود للحالات الخاصة فقط: بدونه، لا يعود الرسم قادرًا على التكيّف مع الحجم الذي تعطيه إياه في CSS.</p> <p>اعرف ما قد تعطّله الإضافات الأخرى:</p> <ul> <li><strong>تقصير المعرّفات وإزالة غير المستخدم منها</strong> يعيد تسمية معرّفات مثل <code>#icon-home</code> إلى <code>a</code>. فيتوقف عن العمل أي محدِّد CSS، أو استعلام JavaScript، أو مرجع sprite من نوع <code><use href="#…"></code>، أو مرساة صفحة، أو حركة SMIL/CSS تستهدف الاسم القديم.</li> <li><strong>إزالة <title></strong> و<strong>إزالة <desc></strong> تحذفان الاسم والوصف المخصّصين لإمكانية الوصول. أبقِهما في الأيقونات والمخططات ذات المعنى التي يجب أن تعلنها قارئات الشاشة.</li> <li><strong>الدقة العشرية</strong> المنخفضة قد تشوّه الأيقونات الصغيرة: تتموّج المنحنيات وتنزاح الحواف. راجع المقارنة البصرية دائمًا؛ والقيمة 3 افتراضية آمنة.</li> <li><strong>دمج المسارات</strong> يجمع المسارات المتجاورة في مسار واحد، فيفقد تأثير المرور بالمؤشر أو الحركة التي تستهدف مسارًا بعينه هدفها.</li> </ul> <h2>نصائح</h2> <ul> <li>احتفظ بنسخة رئيسية غير محسَّنة للتحرير، وتعامل مع ملف <code>.min.svg</code> كأنه شيفرة مترجمة.</li> <li>فعّل gzip أو brotli على خادمك: الصيغ النصية مثل SVG تنضغط جيدًا جدًا، ورقم <strong>بعد gzip</strong> يبيّن ما يحمّله الزوار فعلًا (يظهر عندما يدعم متصفحك <code>CompressionStream</code>).</li> <li>يمكن تنسيق SVG المضمَّن مباشرةً في الصفحة بـ CSS وتحريكه، لكنه لا يُخزَّن مؤقتًا بشكل منفصل؛ أما SVG داخل <code><img></code> فيُخزَّن مؤقتًا لكن لا يمكن تنسيقه من الصفحة.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">الأسئلة الشائعة</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>هل يُرفع ملف SVG الخاص بي إلى خادم؟</summary> <div class="prose px-5 pb-5"><p>لا. يعمل SVGO في متصفحك. والشيء الوحيد الذي يُنزَّل هو شيفرة أداة التحسين نفسها، عند أول تحسين.</p></div> </details> <details class="faq group"> <summary>لماذا تُعرض المعاينة كصور؟</summary> <div class="prose px-5 pb-5"><p>SVG صيغة مستندات يمكن أن تحتوي على JavaScript وأن تحمّل ملفات خارجية. تُعرض المعاينتان كعناصر <code><img></code> من عناوين blob محلية، وفي هذا الوضع لا تشغّل المتصفحات أي نص برمجي ولا تجلب موارد خارجية، فمعاينة ملف SVG غير موثوق هنا آمنة. لكن الشيفرة المحسَّنة نفسها تبقى محتوية على أي نصوص برمجية ما لم يكن <strong>إزالة النصوص البرمجية وسمات الأحداث</strong> مفعّلًا (وهو مفعّل في <strong>أقصى</strong>).</p></div> </details> <details class="faq group"> <summary>لم يعد ملف SVG المحسَّن يتكيّف مع الحجم. ماذا حدث؟</summary> <div class="prose px-5 pb-5"><p>الأرجح أن الـ viewBox أُزيل، إما بخيار <strong>إزالة viewBox</strong> أو سابقًا بأداة أخرى. أعد تحسين الملف الأصلي مع إيقاف تلك الإضافة.</p></div> </details> <details class="faq group"> <summary>لماذا توقف الـ sprite أو الحركة عن العمل؟</summary> <div class="prose px-5 pb-5"><p>غيّر <strong>تقصير المعرّفات وإزالة غير المستخدم منها</strong> أو <strong>دمج المسارات</strong> العناصرَ التي تشير إليها شيفرتك. استخدم الإعداد <strong>آمن</strong> الذي يحتفظ بكليهما.</p></div> </details> <details class="faq group"> <summary>الملف المحسَّن ليس أصغر. لماذا؟</summary> <div class="prose px-5 pb-5"><p>الأرجح أن ملف SVG مضغوط مسبقًا. جرّب <strong>أقصى</strong> أو <strong>الدقة العشرية</strong> أقل، وأوقف <strong>تنسيق مقروء (إخراج بمسافات بادئة)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">أدوات ذات صلة</h2> <ul class="card-grid mt-4"><li><a class="card" href="/ar/تحويل-svg-إلى-png/"> <span class="card-title">تحويل SVG إلى PNG</span> <span class="card-text">حوّل ملفات SVG إلى PNG أو JPG أو WebP في متصفحك بأي عرض أو ارتفاع أو معامل تكبير أو DPI، مع خلفية شفافة أو ملونة. تحويل جماعي وZIP دون رفع.</span> </a></li> <li><a class="card" href="/ar/تحويل-الصورة-إلى-svg/"> <span class="card-title">تحويل الصورة إلى SVG</span> <span class="card-text">حوّل شعارًا أو رسمًا بصيغة PNG أو JPG إلى مسارات SVG متجهة في متصفحك: إعدادات مسبقة، وعدد الألوان، وتصفية النقاط، ومعاينة آمنة، دون رفع.</span> </a></li> <li><a class="card" href="/ar/ضغط-الصور/"> <span class="card-title">ضغط الصور</span> <span class="card-text">اضغط صور JPG وPNG وWebP بشريط للجودة، وقارن الحجم قبل الضغط وبعده، وعالج دفعات من الصور دون رفعها إلى أي خادم.</span> </a></li> <li><a class="card" href="/ar/تنسيق-css/"> <span class="card-title">منسّق CSS وضاغطه</span> <span class="card-text">جمّل شيفرة CSS الفوضوية بمسافات بادئة مرتبة أو اضغطها باستخدام csso، واعرض الحجم قبل وبعد. تعمل في متصفحك دون رفع أي شيء.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="إعلان"><span class="ad-label">إعلان</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">أدوات مجانية على الإنترنت تعمل في متصفحك. بياناتك تبقى على جهازك.</p> </div> <nav aria-label="الفئات"> <p class="font-semibold">الأدوات</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/ar/أدوات-النصوص/">أدوات النصوص</a></li><li><a class="link-muted" href="/ar/أدوات-المطورين/">أدوات المطورين</a></li><li><a class="link-muted" href="/ar/أدوات-الويب/">الويب وتحسين محركات البحث والتسويق</a></li><li><a class="link-muted" href="/ar/أدوات-الألوان/">الألوان والتصميم</a></li><li><a class="link-muted" href="/ar/أدوات-الصور/">أدوات الصور</a></li><li><a class="link-muted" href="/ar/أدوات-pdf/">PDF والمستندات</a></li><li><a class="link-muted" href="/ar/حاسبات-رياضية/">حاسبات رياضية</a></li><li><a class="link-muted" href="/ar/حاسبات-مالية/">حاسبات مالية</a></li><li><a class="link-muted" href="/ar/أدوات-التاريخ-والوقت/">التاريخ والوقت</a></li><li><a class="link-muted" href="/ar/تحويل-الوحدات/">محولات الوحدات</a></li><li><a class="link-muted" href="/ar/حاسبات-الصحة/">الصحة واللياقة</a></li><li><a class="link-muted" href="/ar/حاسبات-المنزل/">المنزل والأعمال اليدوية والطبخ والسيارات</a></li><li><a class="link-muted" href="/ar/مولدات/">المولّدات</a></li><li><a class="link-muted" href="/ar/اختبارات-الأجهزة/">اختبارات الجهاز والمتصفح</a></li><li><a class="link-muted" href="/ar/أدوات-الصوت-والفيديو/">الصوت والفيديو</a></li><li><a class="link-muted" href="/ar/أدوات-التعليم/">التعليم واللغات</a></li><li><a class="link-muted" href="/ar/ألعاب/">ألعاب</a></li></ul> </nav> <nav aria-label="معلومات"> <p class="font-semibold">معلومات</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/ar/من-نحن/">من نحن</a></li> <li><a class="link-muted" href="/ar/اتصل-بنا/">اتصل بنا</a></li> <li><a class="link-muted" href="/ar/سياسة-الخصوصية/">سياسة الخصوصية</a></li> <li><a class="link-muted" href="/ar/شروط-الاستخدام/">شروط الاستخدام</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>