SVG در HTML5

HTML5 ، از SVGدرون خطی پشتیبانی می کند.

SVG چیست؟

مخفف گرافیک برداری مقیاس پذیر است
برای تعریف گرافیک مبتنی بر بردار برای وب استفاده می شود
گرافیک در فرمت XML را تعریف می کند
اگر گرافیک های SVGرا زوم کنیم یا تغییر اندازه دهیم ، هیچ کیفیتی از دست نمی دهند
هر عنصر یا صفتی را در فایل های SVG می توان متحرک کرد
SVG از موارد پیشنهاد شده توسط W3C می باشد

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

• تصاویر SVG می توانند با هر ویرایشگر متنی ایجاد و ویرایش شوند

• تصاویر SVG می توانند جستجو، فهرست ، اسکریپت و فشرده شوند

• تصاویر SVG مقیاس پذیر هستند

• تصاویر SVG می توانند با کیفیت بالا در هر رزولوشنی چاپ شوند

• تصاویر SVG قابل زوم هستند (بدون هیچگونه تخریبی میتوانند زوم شوند)

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

اینترنت اکسپلورر ۹، فایرفاکس، اپرا، کروم، و سافاری از SVG درون خطی پشتیبانی می کنند.

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

پیش نمایش کد

تفاوت های بین SVG و Canvas
SVG زبانی برای توصیف گرافیک دو بعدی در XML است.
بوم تساوی گرافیک دو بعدی ، در پرش (با جاوا اسکریپت) است.
SVG مبتنی بر XML ، که بدان معنی است که هر عنصر در SVG DOM موجود است. شما می توانید گرداننده های رویداد جاوا اسکریپت را به یک عنصر ضمیمه کنید.
در SVG، هر یک از شکل های طراحی شده به عنوان یک جسم، به یاد سپرده می شود. اگر ویژگی های یک آبجکت SVG تغییر کند، مرورگر به طور خودکار می تواند دوباره شکل را ارائه کند.
بوم ، به صورت پیکسل به پیکسل ارائه شده است. در بوم، هنگامی که گرافیک کشیده می شود، توسط مرورگر فراموش می شود. (مانند SVG به خاطر سپرده نمی شود) اگر موقعیت آن باید عوض شود، کل صحنه، نیاز به ترسیم دوباره دارد ، از جمله هر یک از آبجکت ها که ممکن است تحت پوشش گرافیک باشد.
مقایسه Canvas و SVG
جدول زیر برخی از تفاوت های مهم بین Canvas و SVG نشان می دهد.

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

 

SVG در HTML5
5 (100%) 1 رای

(391 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *