Loading…

حول منسق ومضغوط SVG عبر الإنترنت

هل تتعامل مع ملفات SVG فوضوية أو كبيرة الحجم؟ الصق كودك أو ارفع ملف `.svg`، اختر **تنسيق** للتجميل أو **تصغير** لتقليل حجمه، واحصل فوراً على ترميز SVG نظيف ومحسّن. مثالي للمصممين، مطوري الواجهات الأمامية وأي شخص يحتاج إلى تحسين سريع وآمن للمتجهات. 🚀

الميزات الرئيسية لمنسق SVG الخاص بنا

  • **وضع التجميل** مع مسافة بادئة ذكية، لف الأسطر ومحاذاة السمات
  • **وضع التصغير** الذي يزيل المسافات البيضاء والتعليقات وبيانات التعريف الزائدة
  • تنسيق على غرار Prettier وتحسين على غرار SVGO تحت الغطاء
  • نمط مسافة بادئة قابل للتكوين (مسافات أو علامات تبويب) وحجم مسافة بادئة
  • عمود لف اختياري للحفاظ على المسارات والسمات الطويلة مرتبة
  • نمط ثابت لنهاية السطر (LF / CRLF) لمقارنات نظيفة عبر أنظمة التشغيل
  • اسحب وأفلت ملفات `.svg` حتى 5 ميجابايت أو الصق ترميز SVG مضمن
  • معالجة 100% من جانب العميل — لا تترك رسوماتك المتصفح أبداً
  • نسخ بنقرة واحدة أو تنزيل المخرجات المهيأة (`.formatted.svg`) أو المضغوطة (`.min.svg`)
  • واجهة مستجيبة تعمل بشكل جيد على أجهزة اللابتوب، سطح المكتب والأجهزة اللوحية

🔧 كيفية تنسيق أو ضغط SVG: دليل سريع for svg-formatter

1

1. الصق أو حمّل SVG

📥 اسحب وأفلت ملف `.svg` الخاص بك أو الصق ترميز SVG الخام في المحرر. الأداة تكتشف محتوى `image/svg+xml` القياسي تلقائياً.

2

2. اختر تنسيق أو ضغط

✨ اختر **تنسيق** لترميز مقروء للبشر (ممتاز للمراجعات والتحكم بالإصدارات) أو **ضغط** لأصغر حجم ملف ممكن.

3

3. اضبط خيارات التنسيق

⚙️ اضبط **نمط المسافة البادئة** (مسافات أو علامات تبويب)، **حجم المسافة البادئة** واختياري **التفاف / طول السطر**. هذه تتوافق مباشرة مع إعدادات المُنسّق الأساسي.

4

4. معاينة وتصدير

👀 افحص كود SVG المُحسّن، اختبره بسرعة في مشروعك، ثم انسخه إلى الحافظة أو حمّل النتيجة كملف `.svg` جديد.

التفاصيل التقنية

محرك التجميل (وضع التنسيق)

وضع التنسيق يستخدم محركاً على غرار Prettier مُعدّ لترميز SVG XML. يركز على القابلية للقراءة ومقارنات مستقرة ومتوقعة.

الجانبالسلوكملاحظات
نمط المسافة البادئةمسافات أو علامات تبويبقابل للتكوين عبر **نمط المسافة البادئة** (يتوافق مع `indentStyle`).
حجم المسافة البادئة1–8 مسافاتيتحكم بعرض التداخل عند استخدام المسافات (يتوافق مع `indentSize`).
التفاف / طول السطر0–120 عمود`0` يعطل التفاف؛ وإلا يتم لف الأسطر الطويلة حول العمود المختار (يتوافق مع `wrapLineLength`).
نهاية السطرLF (`\n`) أو CRLF (`\r\n`)يحافظ على نهايات الأسطر متسقة عبر أنظمة التشغيل (يتوافق مع `endOfLine`).
لغة الإخراجSVG بنمط XMLيحافظ على بنية XML متوافقة مع SVG للتضمين الآمن.

خطوة التصغير (وضع التصغير)

يستخدم وضع التصغير خطوة مستوحاة من SVGO تركز على تقليل الحجم مع الحفاظ على المخرجات المرئية.

الخطوةالوصفالتأثير
إزالة التعليقاتيزيل عقد التعليقات `<!-- ... -->` التي لا تؤثر على العرض.ملفات أصغر، فروقات أنظف.
إزالة المسافات البيضاء الزائدةيطوي المسافات والتبويبات وفواصل الأسطر غير الضرورية.مكاسب كبيرة لملفات SVG المصدرة من المحررات المطولة.
تقليم البيانات الوصفيةيزيل عقد البيانات الوصفية غير المعرضة عند الأمان.جيد للأصول الإنتاجية العامة.
تطبيع السماتيبسط ويعيد ترتيب السمات بطريقة مستقرة.مخرجات أكثر إحكاما، قابلية أفضل للتخزين المؤقت.

الترميز والتوافق

المخرجات متوافقة مع UTF-8 SVG للمتصفحات والأدوات الحديثة، متوافقة مع مواصفات SVG 2.

الأداء والحدود (متصفح سطح مكتب نموذجي)

نوع الملفحجم الإدخالوقت التجميلوقت التصغيرنسبة التخفيض النموذجية
أيقونة5 كيلوبايت⚡ < 15 مللي ثانية⚡ < 20 مللي ثانية≈ 25–40%
رسم توضيحي100 كيلوبايت⚡ < 60 مللي ثانية⚡ < 90 مللي ثانية≈ 40–55%
الرسم البطولي500 كيلوبايت⏱️ < 300 مللي ثانية⏱️ < 450 مللي ثانية≈ 50–60%
يعتمد الأداء الفعلي على معالجك ومتصفحك وتعقيد SVG.

بدائل سطر الأوامر للمستخدمين المتقدمين

تفضل سير عمل الطرفية أو التكامل مع CI؟ اجمع بين Prettier و SVGO لسلوك مشابه لهذه الأداة:

لينكس / 🍎 ماك

تحسين مظهر SVG باستخدام Prettier

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

يطبق مسافات بادئة متسقة ولف الأسطر على ترميز SVG الخاص بك.

تصغير SVG باستخدام SVGO

npx svgo input.svg -o input.min.svg

يزيل التعليقات وبيانات التعريف والمسافات الزائدة لملفات أصغر.

ويندوز (PowerShell أو CMD)

طباعة SVG بشكل منسق باستخدام xmlstarlet (عبر WSL أو أصلي)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

يقوم بتنسيق SVG/XML بمسافة بادئة بمقدار 2 مسافة.

تصغير SVG باستخدام SVGO (بدون تثبيت عالمي)

npx svgo input.svg -o min.svg

يشغل SVGO مباشرة عبر `npx` لتحسينات لمرة واحدة.

أضف Prettier + SVGO إلى عملية البناء أو خطافات ما قبل الالتزام حتى يتمكن المصممون من تصدير SVGs الخام ويحافظ مسارك على تحسينها.

التطبيقات العملية

أداء الويب وحزم الواجهة الأمامية

  • تقليل أحمال SVG في أنظمة التصميم ومجموعات الرموز وأوراق الرموز.
  • تضمين SVG المصغر داخل HTML/CSS لتوفير طلبات HTTP إضافية.
  • تحسين مؤشرات Core Web Vitals عن طريق تصغير الرسوم التوضيحية البطولية في صفحات الهبوط.
<img src="/assets/hero.min.svg" alt="Optimized hero graphic" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

تسليم التصميم والتحكم في الإصدار

  • تحسين مظهر SVG المُصدر قبل مراجعة الكود لجعل الاختلافات قابلة للقراءة.
  • احتفظ بـ `.formatted.svg` منسق للتعاون و `.min.svg` للإنتاج.
  • فرض مسافات بادئة متسقة وترتيب سمات عبر نظام التصميم.

الجوال والبريد الإلكتروني والتطبيقات الهجينة

  • تصغير SVGs المضمنة في رسائل البريد الإلكتروني HTML لحملات أخف.
  • تقليل حجم حزمة التطبيق في React Native / Capacitor / Ionic عند شحن العديد من الرموز.
  • توفير عرض النطاق للمستخدمين على اتصالات بطيئة أو محدودة.

❓ Frequently Asked Questions

❓ما هو تنسيق SVG؟

إعادة الهيكلة (أو التجميل) تعيد تنظيم ترميز SVG الخاص بك مع مسافات بادئة متسقة، وفواصل أسطر، وترتيب للسمات. لا يغير كيفية عرض الصورة، فقط كيف يبدو الكود ويتصرف في المقارنات.

📏هل سيغير التصغير من مظهر SVG الخاص بي؟

في الحالات العادية، لا. يزيل التصغير التعليقات والمسافات البيضاء الزائدة وبيانات التعريف غير المعروضة. تم تصميمه للحفاظ على النتيجة المرئية مع تقليل الحجم. إذا كنت تعتمد على بيانات تعريف خاصة لأدوات التحرير، احتفظ بنسخة احتياطية من الملف الأصلي.

🔒هل يتم تحميل SVG الخاص بي إلى خادم؟

أبداً. كل عمليات التنسيق والتصغير تعمل بالكامل في متصفحك باستخدام JavaScript/WebAssembly. لا يتم إرسال ملفات SVG الخاصة بك إلى أي خادم أو تخزينها عن بُعد.

🚀ما مقدار الحجم الذي يمكن أن يوفره التصغير؟

التوفير الفعلي عادة ما يكون بين **30% و 70%**، اعتماداً على كيفية تصدير SVG وكمية بيانات التعريف أو المسافات البيضاء التي يحتويها.

⚠️هل يمكن لإزالة `<metadata>` أو التعليقات أن تعطل سير عملي؟

لرسومات الويب العامة، عادة ما تكون إزالة بيانات التعريف والتعليقات آمنة. ومع ذلك، إذا كانت أدوات التصميم الخاصة بك تخزن بيانات التحرير أو معلومات الترخيص في تلك الأقسام، احتفظ بنسخة أصلية غير مصغرة في نظام التحكم بالإصدارات للتعديلات المستقبلية.

Pro Tips

Best Practice

احتفظ بـ `icon.formatted.svg` غير مصغر في مستودعك لمقارنات نظيفة، ثم أنشئ `icon.min.svg` كجزء من خطوة البناء.

Best Practice

قم دائماً بتضمين عناصر `<title>` و `<desc>` ذات معنى قبل التصغير للحفاظ على إمكانية وصول SVGs الخاصة بك لقارئات الشاشة.

Best Practice

اجمع بين تصغير SVG وضغط HTTP (Gzip/Brotli) لاستخراج المزيد من البايتات من الرسوم التوضيحية والمخططات الثقيلة.

Best Practice

لمجموعات الرموز، فكر في استراتيجية sprite: صغر مرة واحدة، ثم أشر إلى الرموز عبر `<use>` بدلاً من تكرار كود SVG في كل مكان.

Additional Resources

مواصفات W3C SVG 2
Technical specification
وثائق MDN: SVG
Documentation
SVGO (GitHub)
Documentation
تنسيق Prettier لـ XML / SVG
Documentation

Other Tools