HTML svg Tag

HTML svg Tag – يٌستخدم الوسم <svg> كحاوية لرسومات الـ SVG (Scalable Vector Graphics). يمكن استخدامه كعنصر خارجي لمستندات الـ SVG أو تضمينة داخل مستندات HTML.

HTML svg Tag

مثال للتوضيح

شغل إيدك

إستخدام وسم <svg> لرسم مستطيل:

<svg width="300" height="200">
  <rect x="50" y="50" width="200" height="100" fill="red" stroke-width="5" stroke="grey" />
</svg>

يمكنك رسم مستطيل أو دائرة أو مسارات أو أى شكل أخر بإستخدام <svg> بأشكال وطرق مختلفة!

يمكن أن تكون السمة xmlns مطلوبة فقط لعنصر svg الخارجي لمستندات SVG. فى حالة تضمينة في عناصر svg الداخلية أو مستندات HTML فإن هذه السمة غير مطلوب.

السمات المحددة – Specific Attributes

يدعم الوسم <svg> هذه السمات:

السمة	القيمة	الوصف
baseProfile^deprecated	none full basic tiny	يحدد الحد الأدنى لملف تعريف لغة SVG الذي يتطلبه المستند.
contentScriptType^deprecated	content-type	يحدد لغة البرمجة النصية الافتراضية المستخدمة بواسطة جزء SVG.
contentStyleType^deprecated	content-type	يحدد لغة التنسيق (style sheet) الافتراضية المستخدمة بواسطة جزء SVG.
height	length \| percentage	يحدد الارتفاع المعروض لإطار العرض المستطيل. (ليس ارتفاع نظام الإحداثيات)
preserveAspectRatio	none xMinYMin xMidYMin xMaxYMin xMinYMid xMidYMid xMaxYMid xMinYMax xMidYMax xMaxYMax (meet\|slice)	يحدد كيف يجب أن يتعدل جزء svg إذا تم عرضه بنسبة عرض إلى ارتفاع مختلفة. meet (الإفتراضية): يحدد أن الصورة تحافظ على تناسبها وتكون مرئية. slice: يحدد أن الصورة تحتفظ بنسبها ويتم تصغير حجم viewBox قدر الإمكان.
version^deprecated	number	يحدد إصدار SVG المستخدم للمحتوى الداخلي للعنصر.
viewbox	list-of-numbers	يحدد حدود إطار عرض SVG لجزء SVG الحالي.
width	length \| percentage	يحدد العرض المعروض لإطار العرض المستطيل. (ليس ارتفاع نظام الإحداثيات)
x	length \| percentage	يحدد إحداثي x المعروض لحاوية svg. لن يؤثر على عناصر svg الخارجية.
y	length \| percentage	يحدد إحداثي y المعروض لحاوية svg. لن يؤثر على عناصر svg الخارجية.