مولّد سبرايت SVG
أضف عدة أيقونات SVG واحصل على ورقة سبرايت واحدة مدمجة من عناصر <symbol>
بمعرّفات تُنشأ تلقائيًا وخالية من التعارض.
انقر لاختيار ملفات .svg، أو اسحبها وأفلتها هنا
اختر عدة أيقونات دفعة واحدة. يبقى على جهازك، لا يُرفع شيء.
الأيقونات
كيف يعمل
يُحلَّل كل ملف SVG تم رفعه باستخدام محلل DOM الخاص بالمتصفح، وتُقرأ خاصية
viewBox الخاصة به (أو العرض والارتفاع إن لم تكن viewBox محددة)، ثم يُغلَّف
ترميزه الداخلي داخل عنصر <symbol id="..." viewBox="...">. تُدمج جميع
الرموز بعد ذلك في عنصر <svg> واحد مخفي، وهو النمط القياسي المعروف
بـ"سبرايت SVG" المستخدم لتقديم أيقونات كثيرة كطلب واحد بدلاً من ملفات صور منفصلة أو نسخ
مضمّنة متكررة. تُشتق المعرّفات من اسم كل ملف، وتُميَّز تلقائيًا في حال تعارض ملفين على
نفس المعرّف.
يتم التحليل والدمج بالكامل داخل جافاسكريبت هذه الصفحة. لا يُرسل أي شيء ترفعه إلى أي مكان.
أسئلة شائعة
كيف يعمل سبرايت symbol؟
تتحول كل أيقونة إلى <symbol id="..."> داخل عنصر <svg> واحد مخفي، يوضع مرة واحدة في أي مكان من HTML صفحتك. يعرض أي عنصر بعد ذلك تلك الأيقونة عبر <svg><use href="#id"></use></svg>، بحيث يقوم المتصفح بتنزيل وتحليل الرسم مرة واحدة فقط مهما تكرر استخدامه.
كيف تُنشأ معرّفات الأيقونات؟
من اسم كل ملف: يُحوَّل إلى أحرف صغيرة، وتُستبدل الأحرف غير الأبجدية الرقمية بشرطات، ويُحذف الامتداد. إذا أنتج ملفان نفس المعرّف، تُضاف لاحقة رقمية للحفاظ على إمكانية الوصول لكل رمز.
هل تُرفع أيقوناتي إلى أي مكان؟
لا. تُقرأ الملفات وتُدمج بالكامل داخل متصفحك باستخدام File API. لا شيء يُرفع.