گرافیک برداری

گرافیک برداری

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

گرافیک برداری گرافیک برداری گرافیک برداری Vector graphics themeina

SVG چیست؟

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

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

عنصر SVG برای رسم گرافیک برداری در صفحات وب

در قسمت پیشین عنصر Canvas را جهت رسم گرافیک بصورت بیت مپ در صفحات وب به شما معرفی کردیم. و اما در این قسمت قصد معرفی عنصر جدید (Scalable Vector Graphics)SVG در اچ تی ام ال ۵ را جهت رسم گرافیک بصورت گرافیک برداری به شما داریم. یک اصلاحیه مربوط به قسمت قبل : عنصر Canvas گرافیک برداری نیست و با زوم کردن دچار افت کیفیت می شود چون ساختار آن بر اساس پیکسل می باشد و اشتباها در ویدئو گفته شد که تگ Canvas بر اساس گرافیک برداری است، این اصلاحیه مربوط به قسمت قبل.

و اما چرا SVG، میدانیم که Canvas که در درس قبلی رسم گرافیک در صفحات وب را با ان یادگرفتیم با SVG که هم اکنون می خواهیم یادبگیریم کار یکسانی انجام میدهند، در اینجا تفاوت های میان آنها را ذکر میکنیم و به خودتان واگذار میکنیم که بخواهید در طراحی هایتان از کدام عنصر استفاده کنید.

در ابتدا بهتر است بگوییم کلا از دو نوع گرافیک برای محاسبات گرافیکی استفاده می شود، گرافیک برداری(vactor) و بیت مپ(bitmap)، بیت مپ از فرمت های رایجی چون gif, jpg, png استفاده می کند که از پیکسل های مستقل و با رنگ های مختلف تشکیل می شوند. اما گرافیک برداری مانند SVG که فرمت هایی چون svg, ai, eps دارد بواسطه نقطه ها و خطوط تعریف می شود و با تغییر اندازه عناصر گرافیکی کیفیت آنها حفظ می شود و این برای وب ایده آل است. همچنین یک ویژگی جالب دیگر که ما با SVG می توانیم داشته باشیم اینکه تصاویری که با این عنصر ایجاد میکنیم و درون آن متنی می نویسیم آن متن براحتی قابل جستجو است و مثل یک متن می باشد! و این برای موتور های جستجو نیز عالی است که محتوای تصاویر را می توانند بخوانند این دقیقا در مقابل تصاویر بیت مپ می باشد.

عنصر SVG برای رسم اشکال، خود شامل عناصر زیر می شود:

 

  • Rectangle <rect>
  • Circle <circle>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline <polyline>
  • Polygon <polygon>
  • Path <path>

مزایای SVG:

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

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

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

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

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

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

گرافیک برداری گرافیک برداری گرافیک برداری svg

گرافیک برداری

مقایسه Canvas و SVG:

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

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

گرافیک برداری گرافیک برداری گرافیک برداری svg logo

مستطیل با لبه های گرد در SVG
 
گرافیک برداری گرافیک برداری گرافیک برداری svg r rec

گرافیک برداری

مستطیل در SVG
 
گرافیک برداری گرافیک برداری گرافیک برداری svg rec
 
 
دایره در SVG
 

svg-circle گرافیک برداری گرافیک برداری svg circle

آموزش HTML آموزش طراحی وب

دیدگاه خود را بیان کنید