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  را نشان می دهد:

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

دیدگاه‌تان را ثبت کنید:

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

نه + 8 =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی