مولّد SVG sprite
اجمع أيقونات SVG كثيرة في ملف sprite واحد. حمّله مرة واحدة واعرض أي أيقونة بوسم use قصير.
أفلت ملفات SVG أو مجلدًا هناتبقى الملفات على جهازك
لا توجد ملفات بعد
تظهر الملفات المحوّلة هنا. أفلت ملفات SVG في الأعلى، أو جرّب بأيقونات نموذجية.
كيف تصنع SVG sprite
- أفلت أيقونات SVGأضف ملفات أو مجلدًا، أو الصق رمز SVG.
- اضبط بادئة المعرّفتصبح كل أيقونة symbol باسم ملفها، مثل icon-rocket.
- نزّل sprite.svgارفعه إلى موقعك واعرض الأيقونات برمز use.
أدوات مجانية أخرى
كل الأدوات- SVG إلى PNGصور PNG حادة بأي مقاس، ملف واحد أو مئات.
- PNG إلى SVGحوّل PNG أو JPG إلى رسم متجهي نظيف.
- PNG إلى ICOملفات .ico لأيقونات المواقع بمقاسات من 16 إلى 256 بكسل.
- أيقونات المواقع والتطبيقاتمجموعات للموقع وChrome وiOS وAndroid.
- SVG إلى Reactمكوّنات JSX بأنواع، جاهزة للصق.
- محسّن SVGملفات SVG أصغر دون فقدان أي شيء مرئي.
- SVG spriteأيقونات كثيرة في ملف sprite.svg واحد.
- صانع الملصقاتملفات ملصقات لـ WhatsApp وTelegram.
أسئلة
لماذا أستخدم SVG sprite؟
يحمّل المتصفح ملفًا واحدًا لكل أيقوناتك ويخزّنه مؤقتًا. كل أيقونة في الصفحة سطر واحد من الرمز بدل ملف SVG كامل.
كيف أعرض أيقونة من الملف؟
أضف عنصر svg بداخله عنصر use تشير خاصية href فيه إلى الملف ومعرّف الأيقونة، مثل /sprite.svg#icon-rocket.
هل يمكنني تغيير اللون بالـ CSS؟
نعم. الأيقونات أحادية اللون تستخدم currentColor، فتأخذ لون النص المحيط بها.
هل تبقى التدرّجات تعمل؟
نعم. تبدأ المعرّفات داخل كل أيقونة بمعرّف الـ symbol الخاص بها، فلا تتعارض التدرّجات والأقنعة أبدًا.