آموزش و يادگيري تگ svg در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <svg> آشنا مي‌شويم. اين تگ براي ايجاد و نمايش گرافيک برداري مقياس‌پذير (Scalable Vector Graphics) در صفحات وب استفاده مي‌شود و امکان طراحي شکل‌ها، نمودارها و آيکون‌هاي قابل بزرگ‌نمايي بدون افت کيفيت را فراهم مي‌کند.

تگ svg در HTML چيست؟

تگ <svg> يک کانتينر براي گرافيک برداري است و مي‌تواند شامل شکل‌هاي مختلف مثل مستطيل، دايره، مسير و متن باشد. از مزاياي SVG مي‌توان به مقياس‌پذيري بالا، کيفيت بدون افت و امکان استايل‌دهي با CSS و تعامل با جاوااسکريپت اشاره کرد.

مثال ساده از تگ svg

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

در اين مثال، يک دايره زرد با حاشيه سبز در مرکز SVG به اندازه ???x??? پيکسل رسم شده است.

ويژگي‌هاي مهم تگ svg

مثال ترکيبي با CSS

<style>
circle {
  fill: lightblue;
  stroke: navy;
  stroke-width: 3;
}
</style>

<svg width="120" height="120">
  <circle cx="60" cy="60" r="50" />
</svg>

با CSS مي‌توان رنگ، ضخامت حاشيه و ديگر ويژگي‌هاي شکل‌هاي داخل SVG را تغيير داد و جلوه‌هاي زيبا ايجاد کرد.

نکات مهم درباره svg

• SVG براي طراحي گرافيک برداري قابل مقياس و بدون افت کيفيت استفاده مي‌شود.
• مي‌توان عناصر داخل SVG را با CSS و جاوااسکريپت کنترل و انيميشن‌سازي کرد.
• از ويژگي viewBox براي مقياس‌پذيري و تطبيق اندازه SVG با اندازه‌هاي مختلف استفاده مي‌شود.

براي يادگيري کامل طراحي گرافيک برداري و استفاده از SVG در صفحات وب، پيشنهاد مي‌کنيم در دوره آموزش HTML و CSS آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.