عنصر SVG در زبان نشانه گذاری HTML

عنصر SVG در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

221

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.

عنصر SVG در زبان نشانه گذاری HTML

عنصر SVG در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

221

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

SVG اشکال گرافیکی مبتنی بر برداز را با فرمت 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 آن طولانی می شود)
  • برای بازی های گرافیکی مناسب نیست

 

در آینده در مورد بحث SVG یک آموزش جداگانه ای خواهیم داشت.

خب به پایان یکی دیگر از مقالات زبان نشانه گذاری HTML رسیدیم و در این بخش کار با اشکال گرافیکی در HTML را یاد گرفتیم.

دز مقاله آینده به مبحث Media ها در HTML می پردازیم.

سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی