محسن ومحول ومولد SVG

ثلاثة وعشرون، مجمعة في أربع مناطق. التحسين: المحسن، والمصغر، والمنظف، والمنسق، ومبسط المسار. التحويل: SVG إلى PNG/JPG/WebP، وSVG إلى React، وURI للبيانات، والعارض والمدقق. التحرير: محرر المسار، وViewBox & Crop، وColor Replacer، وSprite Generator. إنشاء: موجة، نقطة، نمط، شبكة متدرجة، ضوضاء، مقسم الشكل، مضلع، نجمة، حلزوني وتمايل.

افتح المُحسِّن، والصق ملف SVG الخاص بك أو أسقط واحدًا أو أكثر من ملفات .svg، واختر إعدادًا مسبقًا (متوازن، أو الحد الأقصى، أو نظيف فقط) أو قم بتبديل أي من التحسينات الـ 21. تعرض الأداة الأحجام الأصلية والمحسّنة والمضغوطة بصيغة gz بالإضافة إلى فحص مرئي جنبًا إلى جنب. ثم انسخ النتيجة أو قم بتنزيلها أو قم بتنزيل كل ملف بتنسيق ZIP.

استخدم منشئ Wave أو Blob، واضبط أشرطة التمرير (الطبقات، والسعة، والتعقيد، والعشوائية) والألوان، وستبدأ تحديثات المتجهات مباشرة. اضغط على Random لاستكشاف الأشكال المختلفة، وقم بتشغيل الرسوم المتحركة للحصول على تأثير التحويل، ثم انسخ ملف SVG أو قم بتصديره.

نعم. تحتوي كل نتيجة على علامات تبويب تصدير لملفات SVG الأولية وReact ومعرف URI للبيانات المشفر بعنوان URL وBase64 وقاعدة CSS جاهزة لللصق، بالإضافة إلى تنزيلات .svg وPNG/JPG/WebP. تقوم أداة Data URI أيضًا بإنتاج مقتطف قناع CSS ويمكنها فك تشفير URI للبيانات مرة أخرى إلى SVG.

إعلانات XML، DOCTYPE، التعليقات، <metadata> ومساحات أسماء وسمات المحرر من Inkscape، وSodipodi، وIllustrator، وSketch، وSerif، وFigma. فهو يحافظ على مسافة بادئة للعلامة وجعلها قابلة للقراءة، لذا فهو الخيار الصحيح عندما لا تزال ترغب في تحرير الملف يدويًا.

لا. كل شيء، بما في ذلك التحسين وعرض PNG وإنشاء ملفات ZIP، يعمل محليًا في متصفحك. ملفاتك لا تغادر جهازك أبدًا، لذا فهي خاصة وفورية.

قم بلصق أو تحميل ملف SVG الخاص بك ويقوم المحسن بإزالة البيانات التعريفية للمحرر والتعليقات والتعريفات غير المستخدمة والتعليمات البرمجية المتكررة وتقريب الأرقام وضغط بيانات المسار (مثل SVGO). يؤدي هذا غالبًا إلى تقليص الملف بنسبة 30-70% دون تغيير شكله، ويتم تشغيل كل ذلك في متصفحك.

تضيف أدوات التصميم تضخمًا مثل تعليقات المولد ومعرفات الطبقة والمجموعات الفارغة والأرقام الستة العشرية. الصق التصدير في المنظف (يجعله قابلاً للقراءة) أو المحسن (أصغر مخرجات) للحصول على ترميز خفيف الوزن وجاهز للويب.

نعم. استخدم أداة Data URI أو علامة تبويب Data URI في أي نتيجة. ويستخدم ترميز URL، والذي يكون عادةً أصغر بنسبة 30% تقريبًا من Base64، ويمنحك أيضًا Base64 وقاعدة خلفية CSS وعلامة <img>.

افتح SVG إلى PNG / JPG، وأضف ملفاتك، واختر PNG ومقياسًا (على سبيل المثال 4×) أو عرضًا أو ارتفاعًا دقيقًا، وحافظ على تشغيل الخلفية الشفافة. يمكنك تحويل العديد من ملفات SVG إلى ملف ZIP، أو اختيار JPG أو WebP بدلاً من ذلك، أو اختيار مجموعة الأيقونات لتصدير صور PNG بحجم 16–512 بكسل للأيقونات المفضلة وأيقونات التطبيقات.

الصق ملف SVG في SVG to React (JSX)، ثم قم بتسمية المكون واختر TypeScript أو JavaScript أو React أو React Native. يتم تحويل السمات إلى CamelCase، وتصبح الأنماط المضمنة كائنات ويتم نشر {...props} على الجذر. يمكنك أيضًا تبديل الألوان إلى currentColor وإضافة عنوان يمكن الوصول إليه.

ليس مع الإعداد المسبق المتوازن الافتراضي. كل تحسين فيه يزيل البيانات غير المرئية أو يعيد كتابة القيم بشكل متساوٍ. يمكن أن تؤدي الدقة المنخفضة جدًا (0-1 كسور عشرية) إلى تحريك النقاط قليلاً على أيقونات صغيرة، ولهذا السبب يعرض المُحسِّن النص الأصلي والنتيجة جنبًا إلى جنب قبل التنزيل.

افتح ViewBox & Crop، والصق ملف SVG وانقر فوق Crop to content. تقوم الأداة بقياس الحدود الحقيقية للرسم، وتعيين مربع عرض محكم باستخدام المساحة المتروكة التي تختارها، ويمكنها تحديث سمات العرض والارتفاع أو إزالتها.

يكتشف Color Replacer كل تعبئة وحد وتدرج لوني (hex وrgb() وhsl() والألوان المسماة) ويسرد عدد مرات ظهور كل منها. يمكنك إعادة تعيينها واحدًا تلو الآخر، أو تغيير تدرج اللون، والتشبع، والسطوع للملف بأكمله، أو التحويل إلى التدرج الرمادي أو العكس، أو استبدال كل شيء باللون الحالي بحيث يتبع الرمز لون نص CSS الخاص بك.

الكائن هو ملف SVG واحد يحتوي على العديد من الرموز كعناصر <symbol>. أضف أيقوناتك إلى Sprite Generator، ثم قم بالإشارة إلى كل منها باستخدام <svg><use href="#icon-id"/></svg>. يمكن للأداة إضافة بادئة للمعرفات الداخلية لتجنب تعارضات التدرج وتحويل الألوان إلى اللون الحالي، وتقوم بإنشاء رمز الاستخدام لك.

نعم. يتم عرض المعاينات داخل <img> معزول، حيث لا يمكن تشغيل البرامج النصية. تقوم أداة التحقق من الصحة بوضع علامات <script> ومعالجات الأحداث والروابط الخارجية، ويقوم المحسن بإزالة البرامج النصية والمعالجات بشكل افتراضي قبل تضمين الملف على الموقع.

نعم. تحتوي مولدات Wave وBlob على مفتاح تبديل Animate الذي يضيف شكل SMIL مستقلاً بذاته. يتم تشغيله في المتصفحات داخل <img>، وخلفيات CSS وSVG المضمنة، دون الحاجة إلى JavaScript أو CSS.