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.
تعليقات
إرسال تعليق