تخطي إلى المحتوى الرئيسي
مولدي SVG و PNG

مولّد SVG

إنشاء رسومات SVG من النص والأشكال والكود. إنشاء رسومات متجهية قابلة للقياس لمشاريع الويب والطباعة والتصميم.

المولدات

باختصار

إنشاء رسومات وفن الإيموجي واستخراج النصوص وإنشاء صور PNG — كل ذلك محلياً في متصفحك.

تاريخ المراجعة: 2026-09-18

ما الذي تدعمه الأداة

  • إنشاء أشكال SVG من الأوصاف النصية
  • دعم أشكال الدائرة والمربع والمثلث والنجمة والسداسي والماسة والقلب
  • لصق والتحقق من علامات SVG المخصصة
  • تخصيص الألوان والأحجام
  • جميع المعالجات تتم محلياً في متصفحك
  • لا يتم رفع أي بيانات — خصوصية تامة
  • نسخ ترميز SVG وتنزيل الملف من المعاينة نفسها

توليد ملف SVG

اتبع هذه الخطوات لإنشاء رسومات SVG.

  • الخطوة 1

    اختر شكلاً أو الصق SVG

    أدخل اسم شكل مثل دائرة أو مثلث أو نجمة، أو الصق كود SVG الخاص بك.

  • الخطوة 2

    عيّن الألوان والحجم

    استخدمقيم مفصولة بفواصل: شكل|لون|حجم — مثلاً: دائرة|أحمر|200

  • الخطوة 3

    انقر على توليد

    اضغط على زر التوليد لإنشاء الرسم البياني SVG.

  • الخطوة 4

    نسخ أو تنزيل

    انسخ كود SVG إلى الحافظة أو قم بتنزيل ملف .svg مباشرة.

الأخطاء الشائعة

استخدام أشكال معقدة جداً غير مدعومة

النتيجة: قد لا يتم عرض SVG غير صالح بشكل صحيح أو على الإطلاق في الإخراج.

الإصلاح: ابدأ بأشكال بسيطة مثل الدائرة والمربع والمثلث

نسيان تحديد الألوان كقيم سداسية عشرية

النتيجة: أسماء الأشكال غير المعترف بها تتحول افتراضياً إلى دائرة مسماة بدلاً من الشكل المطلوب.

الإصلاح: استخدم دائماً الصيغة #RRGGBB للألوان

إنشاء SVGs مع عناصر كثيرة تبطئ العرض

النتيجة: ملفات SVG المعقدة جدًا كثيرة العناصر قد تُعرض ببطء.

الإصلاح: بسّط المسارات وقلّل عدد العناصر لأداء أفضل.

عدم التحقق من صحة SVG المخصص قبل الاستخدام

النتيجة: ألوان CSS المسماة مثل 'الأحمر' قد تعمل لكن قيم hex أكثر موثوقية.

الإصلاح: تحقق دائماً من صيغة SVG في لوحة التحقق

تجاهل حجم ملف SVG المصدّر

النتيجة: SVG بدون viewBox قد لا يتم تكبيرها بشكل صحيح عند تضمينها في HTML.

الإصلاح: تحقق من حجم الملف قبل دمجك في مشروعك

استخدام خطوط غير مضمّنة في ملف SVG

النتيجة: ملفات SVG المعقيدة جداً مع العديد من العناصر قد تكون بطيئة في العرض وكبيرة في الحجم.

الإصلاح: استخدم خطوط النظام الشائعة أو ضمّن بيانات الخط داخل SVG لعرض متسق.

إنشاء ملفات SVG بتفاصيل زائدة

النتيجة: ملفات SVG المعقدة جدًا كثيرة العناصر قد تُعرض ببطء.

الإصلاح: بسّط المسارات وقلّل عدد العناصر لأداء أفضل.

أفضل الممارسات

  • استخدم أسماء الأشكال لإنشاء سريع والصق SVG كامل لتحكم تفصيلي
  • حدد الألوان كقيم سداسية عشرية لتناسق عبر المنصات
  • أبقِ SVGs بسيطة لأفضل توافق مع المشغلين المختلفين
  • استخدم معرّفات وفئات وصفية في SVG لتسهيل التعديل لاحقاً

سير العمل المرتبط

معاينة سريعة

مولّد SVG

أدخل وصف الشكل أو الصق SVG مخصصاً واضبط الألوان والأحجام ثم انسخ أو نزّل الملف.

  1. إدخال الوصف
  2. توليد SVG
  3. نسخ أو تنزيل

قيود المتصفح

  • يعتمد عرض SVG على إمكانيات المتصفح.
  • قد لا تعمل رسومات SVG المتحركة المعقدة في جميع السياقات.

المراجع الموثوقة

توثيق الأداةالناشر: MDN · تاريخ المراجعة: 2026-09-18

أمثلة عملية

الإدخال
Hello World
النتيجة
Success

يوضح هذا المثال كيفية عمل الأداة.

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

هل يمكنني التحقق من SVG موجود؟

نعم. الصق أي علامات SVG صالحة وسيتم التحقق منها. يتم الإبلاغ عن الأخطاء فورًا.

هل يمكنني تنزيل SVG؟

نعم. انقر على زر التنزيل لحفظ ملف SVG على جهازك.

هل هناك حد للحجم؟

تعمل الأداة في ذاكرة المتصفح. الملفات الكبيرة جدًا قد تبطئ المعالجة. لأفضل النتائج، استخدم ملفات بحجم معقول.

هل تعمل الأداة بدون إنترنت؟

نعم. تتم جميع المعالجات محليًا في متصفحك. لا حاجة لاتصال بالإنترنت بعد تحميل الصفحة.

هل بياناتي آمنة؟

نعم. لا يتم إرسال أي بيانات إلى الخادم. كل شيء يبقى في متصفحك ويختفي عند إغلاق التبويب.

ما ميزات SVG المدعومة؟

الأشكال الأساسية والألوان والأحجام مدعومة عبر الوصف النصي. يمكن تحرير كود SVG الكامل يدوياً للميزات المتقدمة.

كيف أجعل SVG شفافاً؟

احذف عنصر المستطيل الخلفي من كود SVG، أو اضبط ملئه على "none". ستعرض المعاينة الشفافية بنمط棋盘格.

هل يمكنني تعديل SVG المولد بعد ذلك؟

نعم. يمكن لصق كود SVG المولد في أي محرر SVG مثل Inkscape أو Figma أو Adobe Illustrator.

لماذا استخدام SVG بدلاً من PNG؟

SVGs مستقلة الدقة، تتكيف مع أي حجم دون فقدان الجودة، ولديها ملفات أصغر ومثالية للويب والطباعة.

هل يعمل على الأجهزة المحمولة؟

ينتج المولد وسائط SVG نظيفة و صالحة يمكن استخدامها مباشرة في تطبيقات الويب المحمولة.

هل يمكنني تعديل SVG المولد؟

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

ما حجم الملف المتوقع؟

ملفات SVG صغيرة عادة (1-50 كيلوبايت) لأنها تحتوي على تعليمات متجهة بدلاً من البكسلات.

الخصوصية والعمل دون اتصال

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