<svg>

وسم الرسوميات المتجهة <svg>

وسم svg يرسم أشكالًا متجهة تبقى حادة بأي تكبير — الأيقونات والشعارات والمخططات، قابلة للتنسيق بـ CSS.

رسم بالمعادلات لا بالبكسلات: دائرة SVG تبقى مثالية الحواف على ساعة ذكية وشاشة سينما. يُكتب مباشرة داخل HTML بعناصره الخاصة (circle، rect، path…)، وكل عنصر فيه ابن حقيقي للـ DOM: تلوّنه بـ CSS وتحركه بالأنيميشن وتربطه بالأحداث.

لهذا هو ملك الأيقونات والشعارات بلا منازع — بينما يتربع canvas على الرسم الكثيف المتحرك.

الصياغة

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#7c5cff" />
</svg>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<svg width="260" height="100" viewBox="0 0 260 100">
  <rect x="10" y="20" width="60" height="60" rx="12" fill="#7c5cff" />
  <circle cx="130" cy="50" r="32" fill="#22d3ee" />
  <text x="190" y="58" font-size="18" fill="currentColor">SVG!</text>
</svg>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
viewBox	نظام إحداثيات الرسم الداخلي — سر التحجيم المرن
fill / stroke	لون التعبئة والحدود — fill="currentColor" يرث لون النص

💡 نصائح عملية

أيقونة تتلون مع النص المحيط تلقائيًّا؟ fill="currentColor"
viewBox بلا width/height ثابتين = SVG متجاوب يملأ حاويته

⚠️ أخطاء شائعة

تصدير SVG من برامج التصميم بعشرات الوسوم الزائدة — مرّره على أداة تنظيف (SVGO)
استخدامه لرسم آلاف الجزيئات المتحركة — أداء canvas أنسب

وسوم ذات صلة

<canvas> وسم لوحة الرسم <img> وسم الصور

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs