Fruga

أدوات SVG

انزع من ملف SVG بقايا برنامج الرسم، وقرّب أرقامه، ثم صدّره كمكوّن React أو Vue أو React Native أو Flutter أو Android. كل شيء يجري في هذا التبويب، والملف لا يُرفع إلى أي مكان.

  • المخرجات10 صيغ
  • ملفكلا يغادر التبويب
  • التوفير المعتاد40-60% من الحجم

ملف SVG الخاص بك

الصق الكود، أو أفلت ملف ‎.svg في المربّع.

معاينة

⁦560 B⁩ ← ⁦272 B⁩، أصغر بنسبة ⁦51%⁩

Created with a drawing application
  • أُزيل تعليق واحد
  • أُزيلت سمات المحرّر: 3

المخرجات

272 B · Icon.svg
لم يُرفع شيء، فالتحويل جرى في هذا التبويب.

ما الذي يزيله المحسِّن

التعليقات وكتل البيانات الوصفية والسمات ذات النطاقات التي تتركها برامج الرسم، إضافة إلى المجموعات الفارغة. تُقرَّب الأرقام إلى الدقة التي تختارها، وتُضاف viewBox حين يخلو الملف منها.

ما لا يفعله عن قصد

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

عن مخرجات Android

لا يرسم VectorDrawable إلا المسارات، لذا تُحوَّل المستطيلات والدوائر والمضلّعات أولاً. التدرّجات والمرشّحات والنصوص لا مقابل لها، ويُبلَّغ عنها بدل أن تُحذف بصمت.

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

كيف أحوّل ملف SVG إلى مكوّن React؟
الصق الملف واختر مخرجات React. تُعاد تسمية السمات إلى صيغها في JSX، ويُغلَّف الترميز في مكوّن، وتُمرَّر الخصائص حتى يمكن ضبط الحجم واللون من موضع الاستدعاء. ولا يُرفع شيء — التحويل يجري داخل التبويب.
ما الذي يزيله المحسّن فعلاً؟
التعليقات، وكتل البيانات الوصفية، والسمات ذات النطاقات التي تتركها برامج الرسم، والمجموعات الفارغة. وتُقرَّب الأرقام إلى الدقّة التي تختارها، ويُضاف viewBox حين يكون الملف خالياً منه.
لماذا لا يدمج المسارات أو يسطّح التحويلات؟
لأن هذه العمليات توفّر بايتات لكنها قد تغيّر شكل الملف أو تكسر معرّفاً يشير إليه شيء آخر. أيقونة أصغر تُعرض بشكل مختلف ليست مكسباً، لذا يتوقّف المحسّن قبل كل ما يخاطر بذلك.
هل يحوّل SVG إلى VectorDrawable للأندرويد؟
نعم. وبما أن VectorDrawable لا يرسم إلا المسارات، تُحوَّل المستطيلات والدوائر والمضلّعات إلى مسارات أولاً. والتدرّجات والمرشّحات والنصوص لا مقابل لها، فيُبلَّغ عنها بدل حذفها بصمت.