HTML - SVG الرسوميات

HTML - SVG الرسوميات

عنصر <svg> في HTML يُستخدم لإنشاء رسومات تعتمد على المتجهات (Vector Graphics) مثل الدوائر، المستطيلات، الخطوط، والنصوص. الرسوميات بـ SVG تُحافظ على جودتها عند التكبير أو التصغير.

🔹 الفرق بين SVG و Canvas

• SVG: يعتمد على العناصر (عنصر لكل شكل مرسوم).
• Canvas: يعتمد على البكسلات (لا يمكن تعديل الأشكال بعد الرسم إلا بإعادة الرسم).
• SVG مناسب للرسوميات التفاعلية، والمخططات الثابتة.
• Canvas مناسب للألعاب والرسوم المتغيرة بشكل مستمر.

🧱 الشكل الأساسي لعنصر SVG

<svg width="300" height="200">
  ... الأشكال هنا ...
</svg>

🧪 مثال: رسم مستطيل

<svg width="300" height="100">
  <rect width="300" height="100" style="fill:blue;" />
</svg>

🧪 مثال: رسم دائرة

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="green" />
</svg>

🧪 مثال: رسم نص

<svg width="300" height="100">
  <text x="20" y="50" font-size="30" fill="red">Hello SVG</text>
</svg>

📋 عناصر SVG الشائعة

• <rect> — مستطيل
• <circle> — دائرة
• <ellipse> — بيضاوي
• <line> — خط مستقيم
• <polyline> — سلسلة من الخطوط
• <polygon> — مضلع مغلق
• <text> — نص
• <path> — مسار مخصص

📌 ملاحظات مهمة

• SVG مدعوم من جميع المتصفحات الحديثة.
• يمكنك تنسيق عناصر SVG باستخدام CSS.
• يمكنك التفاعل مع عناصر SVG عبر JavaScript تمامًا كما تتفاعل مع عناصر HTML.