أشكال SVG الأساسية: rect وcircle وpath

يستخدم SVG نظام إحداثيات تكون فيه (0,0) في الزاوية العلوية اليسرى. تزداد X باتجاه اليمين، وتزداد Y باتجاه الأسفل. تحدد الخاصيتان width وheight نافذة العرض، بينما تحدد الخاصية viewBox فضاء الإحداثيات.

ارسم المستطيلات باستخدام <rect x="10" y="10" width="200" height="100" rx="8" ry="8">. تعمل rx وry على تدوير الزوايا. تتحكم الخاصيتان fill وstroke، أو CSS، في التعبئة والحدود. عند حذف x وy، تكون قيمتهما الافتراضية 0,0.

ارسم الدوائر باستخدام <circle cx="100" cy="100" r="50">. تمثل cx وcy إحداثيات المركز، بينما يمثل r نصف القطر. لا تملك دوائر SVG ما يعادل معاملات زاوية القوس في canvas؛ فهي دائمًا دوائر كاملة.

ارسم الأشكال البيضاوية باستخدام <ellipse cx="100" cy="100" rx="80" ry="40">. يمثل rx نصف القطر الأفقي، بينما يمثل ry نصف القطر الرأسي. يكون الشكل البيضاوي المكافئ لدائرة عندما يتساوى rx وry.

يرسم <line x1="0" y1="0" x2="100" y2="100"> مقطعًا خطيًا واحدًا. ويرسم <polyline points="0,0 100,50 200,0"> مقاطع خطية متصلة تمر عبر سلسلة من أزواج الإحداثيات. لا يُغلق أيٌّ منهما تلقائيًا.

يشبه <polygon points="100,10 190,190 10,190"> عنصر polyline، لكنه يُغلق الشكل تلقائيًا، إذ يصل خط بين النقطة الأخيرة والنقطة الأولى. استخدم polygon للأشكال المغلقة مثل المثلثات والنجوم وسائر المضلعات المنتظمة.

يُعد path أقوى أشكال SVG؛ إذ يمكنه تمثيل أي مجموعة من الخطوط والأقواس والمنحنيات. تحتوي الخاصية d على أوامر المسار: M (moveTo)، وL (lineTo)، وA (arc)، وC (cubic bezier)، وQ (quadratic bezier)، وZ (closePath).

تستخدم الأوامر المكتوبة بالأحرف الكبيرة إحداثيات مطلقة، بينما تستخدم الأوامر المكتوبة بالأحرف الصغيرة إحداثيات نسبية. ينقل M 100 50 الموضع إلى (100,50). ويرسم L 200 150 خطًا إلى (200,150). ويغلق Z المسار. ويرسم A rx ry rotation large-arc sweep x y قوسًا.

تقبل أشكال SVG خصائص CSS التالية: fill وstroke وstroke-width وopacity وstroke-dasharray. استخدم أصناف CSS على عناصر SVG للحفاظ على تنسيق قابل للصيانة. تعمل انتقالات CSS على SVG مع fill وstroke وopacity، ما يتيح تغييرات سلسة في الحالة.

يجمع العنصر <g> عناصر SVG. طبّق transform أو fill أو stroke على المجموعة للتأثير في جميع العناصر التابعة لها. يتيح التجميع تركيب أشكال معقدة تتحرك أو تتحول معًا، مثل واجهة ساعة بكل مكوناتها.

عرّف الأشكال القابلة لإعادة الاستخدام داخل <defs>، مثل الرموز والتدرجات ومسارات القص. وأشِر إليها باستخدام <use href="#id">. يجنّب ذلك تكرار بيانات المسارات المعقدة، كما يتيح تطبيق التحويل والتنسيق على مستوى كل نسخة باستخدام عنصر use.

ما الفرق بين polyline وpolygon في SVG؟

يوفر SVG عناصر تعريفية للأشكال (rect وcircle وellipse وline وpolyline وpolygon)، بالإضافة إلى عنصر path المرن لإنشاء أشكال معقدة باستخدام أوامر M وL وA وC وQ وZ. يتيح تنسيق CSS والتجميع باستخدام g وإعادة الاستخدام عبر defs/use إنشاء رسومات متجهية قابلة للصيانة والتوسّع، ومضمّنة مباشرةً في HTML.