SVGView

منشئ سبرايت SVG

أنشئ سبرايت واحدًا من مجموعات الأيقونات لتسريع تسليم الواجهة. مناسب لأنظمة التصميم وتطبيقات الويب ويعمل محليًا بالكامل.

اسحب ملف SVG وأفلته

أو انقر للاختيار أو الصق كود SVG

يقبل ملفات .svg فقط
ألصق كود SVG باستخدام Ctrl+V / Cmd+V

اسحب ملفات SVG وأفلتها

أو انقر لاختيار عدة ملفات

يقبل عدة ملفات .svg

لماذا تستخدم منشئ سبرايت SVG؟

ادمج عدة ملفات SVG

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

تسمية تلقائية للمعرّفات

يولّد المعرّفات من أسماء الملفات ويعالج التكرار تلقائيًا، مما يجعل التسمية أوضح ويقلل التعارضات أثناء الاستخدام.

مخرجات سبرايت تعتمد على <symbol>

يصدر سبرايتًا متوافقًا مع `<symbol>` و`<use>` بحيث يمكن إعادة استخدام الأيقونات في HTML أو React أو Vue من دون تكرار غير ضروري.

يحافظ على viewBox

يحتفظ بقيم viewBox لكل رمز حتى تظل الأيقونات قابلة للتحجيم بشكل صحيح من دون قص أو تشوه.

تسليم عبر طلب واحد

يساعدك على شحن سبرايت واحد بدل عشرات الملفات، مما يقلل عدد الطلبات ويبسط التخزين المؤقت في المشاريع الكبيرة.

معالجة محلية وخاصة

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

كيفية إنشاء سبرايت SVG

1

ارفع ملفات SVG

اسحب عدة ملفات وأفلِتها أو ألصق كود SVG. سيحلل المُنشئ كل أيقونة مع الحفاظ على viewBox الأصلي.

2

راجع معرّفات الرموز

يعرض المُنشئ المعرّفات المولدة تلقائيًا حتى تتأكد من التسمية قبل التصدير وتعدل أسماء الملفات إذا احتجت إلى اصطلاح أكثر صرامة.

3

انسخ السبرايت أو نزّله

صدّر السبرايت الناتج وأعد استخدامه عبر الصفحات أو المكونات. يمكنك تضمينه مباشرة أو إضافته إلى مسار البناء.

الأسئلة الشائعة حول منشئ سبرايت SVG

ما هو سبرايت SVG ولماذا يُستخدم؟
سبرايت SVG هو ملف SVG واحد يحتوي عدة عناصر `<symbol>`. يمكنك استدعاء كل رمز عبر `<use>` لعرض الأيقونات عند الحاجة، وهو أسلوب شائع للمكتبات الكبيرة.
كيف يتم إنشاء معرّفات الرموز؟
يشتق المُنشئ المعرّفات من أسماء الملفات ثم يطبّعها لتصبح آمنة. وعند تكرار الاسم يُضاف لاحقة رقمية للحفاظ على التفرّد.
هل يحتفظ السبرايت بقيم viewBox؟
نعم. يحتفظ كل رمز بقيمة viewBox الأصلية حتى تبقى الأيقونات قابلة للتحجيم بشكل صحيح عبر الأحجام المختلفة.
هل يمكن استخدام السبرايت في React أو Vue؟
نعم. يعمل الناتج في React وVue وHTML العادي. أدرج السبرايت مرة واحدة ثم استخدم `<use href="#icon-id" />` داخل المكونات.
هل تُرفع الملفات إلى خادم؟
لا. يعمل منشئ سبرايت SVG محليًا داخل المتصفح، لذلك لا تغادر الملفات جهازك.
هل يجب تحسين الأيقونات قبل إنشاء السبرايت؟
نعم. الأيقونات المحسنة تجعل السبرايت النهائي أصغر وأسهل في الصيانة وتساعد على تحميله بسرعة أكبر.
كيف أحدّث السبرايت لاحقًا؟
أعد تشغيل الأداة باستخدام مجموعة الأيقونات المحدّثة ثم استبدل ملف السبرايت. الحفاظ على معرّفات ثابتة يساعد على عدم كسر المراجع الحالية.
هل الأداة مجانية ومن دون تنزيل؟
نعم. يمكنك استخدامها مجانًا مباشرة من المتصفح، من دون تنزيل أو تثبيت.
هل أحتاج إلى حساب لاستخدامها؟
لا. تعمل الأداة فورًا داخل المتصفح من دون تسجيل، وتبقى الملفات محلية.

أدوات SVG ذات صلة

استخدم منشئ سبرايت SVG مع هذه الأدوات لتنظيف الأيقونات وتوحيد ألوانها وإعادة استخدامها بكفاءة أكبر.

محسن SVG

حسّن الأيقونات قبل إنشاء السبرايت لتقليل الحجم وتسريع التسليم.

افتح الأداة

مصلح viewBox

أصلح قيم viewBox الناقصة حتى يظل السبرايت النهائي قابلاً للتحجيم بشكل صحيح.

افتح الأداة

مبدل لون SVG

طبّق currentColor أو رموز التصميم قبل بناء السبرايت.

افتح الأداة

SVG إلى React

حوّل الأيقونات الفردية إلى مكونات عندما لا تحتاج إلى سبرايت.

افتح الأداة

مدونة SVG ذات صلة

تابع قراءة إرشادات عملية حول سير عمل SVG واستكشاف المشكلات والإنتاج.