طراحی وب

SVG چیست

SVG چیست ؟ SVG مخفف چه کلمه ای است؟

آموزش گرافیک  HTML  درس دوم

SVG چیست : SVG مخفف عبارت Scalable Vector Graphics است. برای تعریف گرافیک سایت استفاده می شود و  W3C آن را توصیه کرده است.

SVG چیست
SVG چیست

عنصر<svg>  در html

عنصر<svg>  مکانی برای گرافیک های  SVG  است.  SVG  چندین روش برای کشیدن خطوط، دایره ، تصاویر و اشکال مختلف دارد.

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

اعدادی که در جدول زیر نشان داده شده است نسخه اول مرورگر است که به طور کامل ازعنصر <svg> پشتیبانی می کند.

Element کروماینترنت اکسپلوررفایرفاکسسافاری آپرا
<svg>۴.۰۹.۰۳.۰۳.۲۱۰.۱

SVG دایره ای

مثال :

 <!DOCTYPE html>
<html>
<body>

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

</body>
</html> 

SVG مستطیلی

مثال:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

SVG  مستطیل گرد

مثال :

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

SVG  ستاره ای

مثال :

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

SVG لوگو

مثال :

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

تفاوت بین  SVG و  Canvas

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

canvas گرافیک ۲D  قابل حرکت  (با جاوا اسکریپت) ترسیم می کند.

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

در SVG هر شکل کشیده شده  به عنوان یک شیء ارائه می شود.  اگر ویژگی یک شیء SVG تغییر کند، مرورگر می تواند به صورت خودکار شکل را مجدد ارائه دهد.

canvas پیکسل به پیکسل ارائه شده است. در canvas، هنگامی که گرافیک کشیده شده است، توسط مرورگر فراموش می شود. اگر موقعیت آن بایستی تغییر  داده شود، باید تمام کد  را بازنویسی کرد، از جمله هر گونه اشیایی که ممکن است توسط گرافیک پوشش داده شود.

مقایسه SVG و  Canvas

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

CanvasSVG
  • Resolution  غیر مستقل
  • از رویداد های handlers پشتیبانی نمی کند
  • قابلیت تفسیر متن ضعیف
  • شما می توانید نتایج عکس را به عنوان .png or .jpg ذخیره کند.
  • برای بازی های گرافیکی مناسب است.
  • Resolution مستقل
  • از رویدادهای handlers پشتیبانی می کند.
  • برای برنامه هایی با زمینه تفسیر زیاد مناسب ترین گزینه است (مثل گوگل مپ)
  • اگر پیچیده باشد تفسیر آن کند است (هر چیزی که از DOM زیاد استفاده کرده باشد کند خواهد شد)
  • برای برنامه های بازی مناسب نیست

 

بیشتر بخوانید:

برچسب ها

دیدگاهتان را بنویسید

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

بستن