SVG بتنسيق HTML
يمكنك تضمين عناصر SVG مباشرة في صفحات HTML الخاصة بك.
قم بتضمين SVG مباشرة في صفحات HTML
فيما يلي مثال على رسم SVG بسيط:
وهنا كود HTML:
مثال
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
شرح كود SVG:
- تبدأ صورة SVG بعنصر <svg>
- تحدد سمات العرض والارتفاع لعنصر <svg> عرض صورة SVG وارتفاعها
- يستخدم عنصر <circle> لرسم دائرة
- تحدد سمات cx و cy إحداثيات x و y لمركز الدائرة. إذا لم يتم تعيين cx و cy ، يتم تعيين مركز الدائرة على (0 ، 0)
- تحدد خاصية r نصف قطر الدائرة
- تتحكم سمات الحد وعرض الحد في كيفية ظهور الحد الخارجي للشكل. قمنا بتعيين مخطط الدائرة على "حد" أخضر بحجم 4 بكسل
- تشير سمة التعبئة إلى اللون داخل الدائرة. قمنا بتعيين لون التعبئة إلى الأصفر
- تغلق علامة الإغلاق </svg> صورة SVG
ملاحظة: نظرًا لأن SVG مكتوب بلغة XML ، يجب إغلاق جميع العناصر بشكل صحيح!