در HTML5، عناصر SVG را می توان به طور مستقیم در صفحه HTML جاسازی کرد.

SVG چیست؟

  • SVG مخفف کلمات Scalable Vector Graphics می باشد. (گرافیک برداری مقیاس پذیر)
  • SVG برای ایجاد گرافیک های برداری در صفحات وب بکار می رود.
  • SVG زبانی برای توصیف گرافیک 2 بعدی در XML است.
  • با Zoom روی گرافیک، کیفیت کاهش نمی یابد.
  • هر المان و خصوصیتی که در SVG دیده می شود، می تواند متحرک شود.
  • SVG یکی از توصیه های کنسرسیوم w3 می باشد.

SVG نسخه 1.1 در ژانویه 2003 برای اولین بار توسط W3C توصیه شد. شرکت های Sun Adobe, Apple, IBM, Kodak ازجمله شرکت هایی بودند که بر روی این پروژه کار کرده اند.

مزایای SVG

مزایای SVG نسبت به سایر فرمت های عکس (مانند GIF و JPEG):

  • عکس های SVG را می توان با هر Editorی، ایجاد و یا ویرایش کرد.
  • حجم این فایل ها از فرمت های پیکسلی کم تر است.
  • این عکس ها قابلیت تغییر اندازه بدون از دست دادن کیفیت را دارند.
  • متون نوشته شده در این عکس ها بصورت TEXT بوده و قابل انتخاب و جستجو می باشد.
  • فایل های SVG کاملا XML هستند.

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <svg> را پشتیبانی می کنند.

قراردادن SVG مستقیماً در صفحات HTML

در HTML5، عناصر SVG را می توان به طور مستقیم در صفحه HTML جاسازی کرد:

مثال (ایجاد گرافیک های برداری در HTML5)

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>
خودتان امتحان کنید »

تفاوت های بین SVG و Canvas

SVG زبانی برای توصیف گرافیک دو بعدی در XML است.

عنصر <canvas> در HTML5 از طریق اسکریبت نویسی (معمولاً JavaScript) برای رسم اشکال در یک صفحه وب استفاده می کند.

XML بودن فایل های SVG این امکان را فراهم می سازد، که دسترسی به عناصر موجود در فایل SVG با توجه به مدل DOM امکان پذیر باشد. همچنین می توانید رویدادهای مختلف JavaScript را به هر عنصری اضافه نمایید.

در SVG، با هر شکل، مانند یک Object برخورد می شود. اگر ویژگی های Object تغییر کند، مرورگر می تواند به طور خودکار دوباره شکل را بازسازی کند.
در Canvas، با اشکال، پیکسل به پیکسل برخورد می شود و هنگامی که شکل رسم شد، دیگر در مرورگر قابل دسترس نیست. اگر نیاز است که موقعیت آن عوض شود، باید کل شکل، دوباره ترسیم شود.

مقایسه Canvas و SVG

جدول زیر مهمترین تفاوت های Canvas و SVG را نشان می دهد:

Canvas SVG
  • وابسته به Resolution است.
  • رویدادها را پشتیبانی نمی کند.
  • قابلیت rendering متن، ضعیف است.
  • می توان تصویر نهایی را با فرمت jpg. یا png. ذخیره کرد.
  • برای ساخت بازی، مناسب است.
  • مستقل از Resolution عمل می کند.
  • رویدادها را پشتیبانی می کند.
  • برای برنامه هایی با نواحی rendering بزرگ (مانند نقشه های گوگل) مناسب است.
  •  در صورت پیچیدگی، سرعت rendering پایین است. (هر چیزی که از DOM استفاده کند بسیار کند خواهد بود)
  • برای ساخت بازی، مناسب نیست.