تگ svg در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ svg در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

تگ svg چیست؟

تگ svg اشاره به عبارت Scalable Vector Graphics دارد و ترجمه آن به زبان فارسی گرافیک برداری مقیاس پذیر می شود.

با استفاده از تگ svg و کدهای xml می توان اشکال گرافیکی را رسم و همانند تصویر نمایش داد.

این تگ با <svg> شروع شده و با </svg> پایان می یابد.

<svg></svg>

چند مورد درباره تگ svg

1- در مقایسه با سایر فرمت های تصویر مانند jpg و ... حجم کمتر و سرعت بالاتری دارد.

2- در صورت بزرگنمایی کیفیت آن کاهش پیدا نمی کند.

3- به علت ساختار کدنویسی قابلیت ویرایش دارد.

4- نگهدارنده اشکال گرافیکی دو بعدی است.

5- رسم اشکال در فرمت xml تعریف می شود.

مثال تگ svg

کد:

<svg width="300" height="200">
  <rect width="300" height="200" style="fill:rgb(100,150,200)"/>
</svg>

اجرا

در مثال فوق با استفاده از تگ svg و کدهای xml مستطیلی را رسم کردیم.

سازگاری با مرورگرها

تگ svg با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS