آموزش HTML – تگ svg

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/15 | بخش : آموزش HTML

تعریف و کاربرد تگ svg در HTML

تگ <svg> تگی است همانند یک ظرف برای نگهداری اشکال گرافیکی که ایجاد می شوند، اشکال گرافیکی مثه یک مربع یا دایره و … که همگی می توانند درون تگ <svg> نگهداری شوند.

کلمه SVG مخفف Scalable Vector Graphics و به معنی ( گرافیک برداری مقیاس پذیر ) می باشد که در HTML5 این تگ یک تگ جدید است.

مثال از تگ svg در HTML

مثال شماره ۱ : رسم دایره بهمراه خط دور لبه

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#000" stroke-width="2" fill="#d51c00" />
</svg> 

تمرین کنید !

 

مثال شماره ۲ : رسم مربع با خط دور لبه و گوشه های گرد شده

<svg width="120" height="120">
 <rect x="5" y="5" rx="10" ry="5" width="100" height="100" style="fill:#00b185;stroke:#000;stroke-width:3;" />
</svg>

تمرین کنید !

 

مثال شماره ۳ : رسم دایره با محتوا (یک متن در داخل دایره)

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#000" stroke-width="2" fill="#d51c00" />
  <text fill="#ffffff" font-size="13" font-family="tahoma" x="73" y="56">Sitekade</text>
</svg> 

تمرین کنید !

 

پشتیبانی مرورگرها از تگ svg در HTML

Element
<svg> ۴٫۰ ۳٫۰ ۹٫۰ ۳٫۲ ۱۰٫۱