آموزش گرافیک برداری یا svg در html با فرمت xml

SVG اشکال گرافیکی مبتنی بر بردار را با فرمت XML تعریف می کند.

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

457

پرسش و پاسخ

0
آموزش گرافیک برداری یا svg در html با فرمت xml

چرا باید از SVG استفاده کنیم؟

SVG مخفف عبارت Scalable Vector Graphics است.

SVG برای تعریف گرافیک برای وب استفاده می شود.

عنصر svg در HTML

عنصر svg در HTML محفظه ای برای اشکال گرافیکی SVG است.

SVG چندین روش برای ترسیم مسیر ها، تصاویر، دایره ها، متن ها و غیره دارد.

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

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

پشتیبانی مرورگرها از SVG در HTML

مثال: در زیر با استفاده از عنصر 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 در 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 در HTML

مثال: در زیر با استفاده از عنصر 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 در HTML

مثال: در زیر با استفاده از عنصر 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 در HTML

مثال: در زیر با استفاده از عنصر 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 در HTML

تفاوت بین عناصر Canvas و SVG

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

Canvas اشکال گرافیکی دو بعدی را در لحظه ترسیم می کند (با زبان برنامه نویسی جاوااسکریپت)

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

در SVG هر شکل ترسیم شده به عنوان یک شی تلقی می شود. اگر ویژگی های یک شکل SVG تغییر کند، مرورگر می تواند به طور خودکار شکل را دوباره render مجدد بگیرد.

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

مقایسه دو عنصر Canvas و SVG

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

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