عارض ومُصغِّر SVG

ما عارض ومُصغِّر SVG؟#

SVG هي صيغة الاختيار للأيقونات والشعارات ورسم الخطوط على الويب — تبقى حادّة عند أيّ حجم وقابلة للتحرير كنصّ. لكنّ ملفات SVG التي تُصدِّرها أدوات التصميم تحمل الكثير من الفُضلات: فضاءات أسماء محرّرات Inkscape وSodipodi، وكتل <metadata>، وتعليقات التأليف، ومسافات بين كلّ وسم. هذه الأمتعة تنتفخ الملف وتُصيب قارئ المصدر بصداع. يُزيل مُصغِّر SVG ما لا يؤثّر على العرض ويُظهِر كم وفّر.

هذه الصفحة عارض ومُصغِّر معًا. الصق مصدر SVG على اليسار، وشاهده معروضًا على اليمين، وبدّل إلى تصغير لتُشغَّل تمريرة تنظيف مؤلَّفة ذاتيًّا تُزيل التعليقات والبيانات الوصفية وفضاءات أسماء المحرّر والمسافات بين العناصر، واقرأ وفورات البايت. تُعرَض المعاينة عبر data URI للصورة بحيث لا يُنفَّذ أيّ سكربت مُضمَّن في SVG أبدًا — يمكنك فحص ملف غير موثوق بأمان.

كيف تستخدمها#

1. الصق SVG في لوحة الإدخال على اليسار، أو انقر مثال لتحميل مثال صغير.
2. تُحدَّث لوحة الإخراج والمعاينة فورًا. افتراضيًّا شريط الأدوات على تصغير، فالناتج هو SVG المنظَّف الأصغر.
3. بدّل إلى الأصل إن أردت أن يُظهر الناتج المصدر الأصليّ السليم (مفيد للمقارنة مع النسخة المُصغَّرة).
4. اقرأ لوحة الإحصاءات تحت اللوحتين:
   • قبل / بعد / الموفّر (بايتات) — حجم UTF-8 للمدخل مقابل الناتج، والنسبة المئوية المُوفَّرة.
   • ملخّص المُزال — كم تعليقًا، وكتل بيانات وصفية، وعناصر محرّر، وسمات محرّر، وعقد مسافات أُزيلت.
   • viewBox — هندسة width / height / viewBox المقروءة من جذر <svg>، كي تُؤكّد حجم لوح الرسم بنظرة.
5. استخدم نسخ أو تنزيل على لوحة الناتج لأخذ SVG المُصغَّر. استخدم مسح لمسح اللوحتين.

أبرز المزايا#

• مُصغِّر حقيقيّ، مكتوب من الصفر — لا svgo. svgo أداة Node القياسية، لكنّها تعتمد على fs وpath في Node ولا تعمل بنظافة في متصفّح. تُسلِّم هذه الصفحة جولة شجرتها الخاصة، فتعمل بصفر تبعيّات من جهة الخادم.
• خمس فئات من الفُضلات تُزال. التعليقات، وكتل <metadata>، وعناصر وسمات فضاء أسماء Inkscape/Sodipodi، والمسافات بين العناصر — كلّ يُعدّ ويُسجَّل.
• معالجة مسافات تدرك النصّ. المسافات داخل <text> و<tspan> و<title> و<desc> و<style> و<script> تُحفَظ، فتنجو التسميات وCSS المُضمَّن.
• معاينة آمنة. يستخدم العرض <img> مع data URI، يعامله المتصفّح كصورة غير منفِّذة — السكربتات المُضمَّنة في SVG لا تعمل. يمكنك لصق ملف غير موثوق دون مخاطرة.
• محاسبة بايت صادقة. تُقاس الأحجام ببايتات UTF-8 (لا بعدّ المحارف)، فيُعرَض لملف بنصّ CJK أو إيموجي حجمه الحقيقيّ على السلك.
• 100% محليّ. التحليل والترقيم يجريان في متصفّحك. لا يغادر SVG الصفحة.

مثال عملي#

قد يفتح تصدير Inkscape نموذجيّ بعدّة أسطر من تعريفات فضاءات أسماء المحرّر وكتلة <metadata> قبل الرسم الفعليّ:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 24 24">
  <metadata id="metadata8">
    <rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format></cc:Work></rdf:RDF>
  </metadata>
  <!-- a checkmark path drawn by hand -->
  <path inkscape:connector-curvature="0" d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/>
</svg>

الصقه، اترك الوضع على تصغير، ويُختصر الناتج إلى:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke="#000" stroke-width="2" fill="none"/></svg>

تُعرِض لوحة الإحصاءات بنحو قبل ~520 بايت، بعد ~210 بايت، توفير ~60%، مع إظهار الملخّص المُزال تعليقًا واحدًا، وكتلة بيانات وصفية واحدة، وسمة محرّر واحدة (inkscape:connector-curvature). تُعرَض العلامة بشكل مطابق في المعاينة — لم يُحذف شيء يؤثّر على الرسم.

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

هل تُشغَّل السكربتات المُضمَّنة في SVG؟#

لا. تُعرَض المعاينة كـ <img src="data:image/svg+xml;base64,…">، والصور المُحمَّلة عبر <img> سياق غير سكربتيّ — لن يُنفِّذ المتصفّح أيّ <script> داخل SVG. يجعل ذلك الصفحة آمنة لفحص ملفات SVG لم تؤلّفها. ومع ذلك تُحفَظ وسوم <script> المصدرية في الناتج المُصغَّر؛ أمّا هل تُشغَل فيعتمد على كيفية تضمين SVG لاحقًا.

لماذا لا أستخدم svgo فقط؟#

svgo الأداة المناسبة في خط بناء Node، لكنّه يعتمد على وحدتَي fs وpath ولا يعمل بنظافة في لسان متصفّح. مُصغِّر هذه الصفحة جولة شجرية مكتفية ذاتيًّا بلا تبعيّات Node، فيعمل بالكامل من جهة العميل — على حساب أنّه أقلّ هجومًا من أعمق تحسينات svgo.

الوفورات صغيرة على ملفّي.#

الملفات المؤلَّفة يدويًّا أصلًا (بلا فضاءات أسماء محرّر، أو بيانات وصفية، أو تعليقات) ليس لها многое لتُزال، فقد تكون الوفورات بضعة بالمئة فقط من المسافات. أكبر المكاسب تأتي من تصديرات أدوات التصميم — Inkscape، Illustrator — وهي بالضبط منشأ معظم الفُضلات.

هل يغيّر التصغير كيف يُعرَض SVG؟#

لا، بالنسبة للفئات التي تُزيلها هذه الأداة: التعليقات والبيانات الوصفية وفضاءات أسماء المحرّر والمسافات بين العناصر لا تحمل دلالات عرض. المسافات داخل العناصر النصّية (<text> و<title> و<desc> و<style> و<script>) تُحفَظ عن قصد، لأنّها هناك قد تكون حاسمة.