ما هو محرر SVG؟

ارسم أشكالاً ومسارات ونصوصًا على لوحة بصرية، واضبط ألوان الحدود والتعبئة، وصدّر كود SVG. دون الحاجة لبرامج سطح المكتب.

تشمل الأدوات مستطيل وبيضاوي وخطّ ومسار حرّ ونصّ ومكتبة أشكال (مثلّث وسداسي ونجمة وسهم). يُحرَّر النصّ مباشرة على اللوحة — اختر أداة النص واكتب، أو انقر نقراً مزدوجاً على أيّ نصّ موجود لتعديله. لكلّ عنصر تعبئته الخاصّة ولون إطاره وسماكته ودرجة شفافيته، ويمكنك إدخال قيم س وص والعرض والارتفاع بدقّة في لوحة الخصائص. استورد ملف SVG قائماً بنقرة واحدة، وارصف الرسم على شبكة من عشرة بكسلات، وتراجع أو أعد التراجع على مدى خمسين خطوة. صدّر النتيجة كرمز SVG عاديّ لـ HTML و React JSX، أو كصورة PNG نقطية للأماكن التي لا تقبل SVG.

كيفية الاستخدام

1. اختر أداة رسم (مستطيل أو شكل بيضاوي أو خط أو مسار أو نص) وارسم على اللوحة.
2. حدد العناصر لتحريكها أو تغيير حجمها أو تدويرها أو تعديل التعبئة والحدود والشفافية.
3. صدّر الرسم النهائي كملف SVG أو انسخ كود SVG الخام.

متى تستخدم

• رسم شعار لمرّة واحدة أو فاصل أو شكل رئيسي لصفحة هبوط.
• تعديل ملفّ SVG قائم يدويّاً دون فتح تطبيق سطح المكتب الثقيل.
• تعليم أساسيات SVG برؤية تغيّر الشيفرة لحظة الرسم على اللوحة.

النتيجة

يحتاج مطوّر ويب إلى علامة شعار بسيطة — دائرتان متداخلتان بتعبئة متدرجة. يرسم الأشكال على اللوحة، ويطبّق الألوان، وينسخ كود SVG مباشرة في ملف HTML الخاص به.

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

هل لصق SVG المنسوخ مباشرة في JSX داخل React آمن؟

نعم في الغالب، مع تنبيه: خصائص مثل stroke-width و stop-color تتحوّل إلى strokeWidth و stopColor في JSX. ما يُنسخ هنا بـ kebab-case ملائم لـ HTML ويُحوَّل ببحث-واستبدال واحد.

هل يمكن استيراد ملف SVG موجود ومتابعة التعديل؟

نعم — استخدم زرّ استيراد SVG لتحميل أيّ ملف .svg من جهازك. تتحوّل المستطيلات والأشكال البيضاوية والدوائر والخطوط والمسارات والنصوص إلى عناصر قابلة للتعديل على اللوحة. تُتجاهَل التدرّجات اللونية والفلاتر والمجموعات المتداخلة لأنّ المحرّر يخزّن كلّ شكل كعنصر بسيط.

لماذا يظهر ملف SVG لديّ بشكل مختلف في Illustrator أو Figma؟

كلّ محرّك يعالج محاذاة الإطار والتدرّجات والمرشّحات قليلاً بشكل مختلف. ما يخرج هنا يطابق ما تعرضه المتصفّحات الحديثة وهو المطابق للمواصفة، والاختلاف غالباً من قراءة البرنامج الآخر.

هل تدعم أداة المسار نقاط تحكّم بيزييه؟

تسجّل أداة المسار الحرّ النقاط التي ترسمها وتُخرجها كخطّ متعدّد. للحصول على منحنيات بيزييه التكعيبية الحقيقية، صدّر الـ SVG ثم عدّل الخاصّية d يدوياً، أو افتح الشيفرة في أداة متّجهية تعرض المقابض.

كم عنصراً يمكن إضافته قبل أن تتباطأ اللوحة؟

بضع مئات من الأشكال مريحة على أيّ جهاز حديث. الآلاف (كالخرائط المعقّدة أو مصفوفات الأيقونات) تبدأ في التباطؤ لأنّ كلّ سحب يُعيد رسم اللوحة بالكامل. اجمع رسوماتك في عدد أقلّ من المسارات المركّبة عند بلوغ ذلك الحدّ.

أدوات ذات صلة