SVG در HTML5

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از Svg در اِچ تی اِم اِل)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
فرم‌های HTML
گرافیک در HTML
۱بوم نقاشی
۲SVG
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

SVG چیست؟

  • SVG مخفف بردارهای گرفیکی مقیاس پذیر (به انگلیسی: Scalable Vector Graphics) است[۱]
  • SVG برای تعریف گرافیک در وب استفاده می‌شود
  • SVG توصیهٔ W3C است

عنصر <svg> در HTML

عنصر <svg> در HTML یک ظرف (به انگلیسی: Container) برای گرافیک SVG است.

SVG متدهای مختلفی برای رسم مسیرها، کادرها، دایره‌ها، متن و تصاویر گرافیکی دارد.

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

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

Chrome.gif Edge.gif Firefox.gif Safari.gif Opera.gif
۴٫۰ ۹٫۰ ۳٫۰ ۳٫۲ ۱۰٫۱


دایره SVG

مثال

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <svg width="100" height="100">
 6   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
 7 </svg>
 8 
 9 </body>
10 </html>


مشاهدهٔ نتیجه


مستطیل SVG

Sorry, your browser does not support inline SVG.

مثال

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


مشاهدهٔ نتیجه


مستطیل با گوشه های گِرد SVG

Sorry, your browser does not support inline SVG.

مثال

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


مشاهدهٔ نتیجه


ستاره SVG

Sorry, your browser does not support inline SVG.

مثال

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


مشاهدهٔ نتیجه


لوگوی SVG

SVG Sorry, your browser does not support inline SVG.

مثال

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


مشاهدهٔ نتیجه


تفاوت های بین SVG و Canvas

SVG یک زبان برای توصیف گرافیک‌های دوبعدی در XML است.

Canvas گرافیک دو بعدی در زمان اجرا (با جاوا اسکریپت) ترسیم می‌کند.

SVG برپایه XML است که یعنی همهٔ عنصرها در داخل SVG DOM موجود هستند. می‌توان کنترل کننده‌های رویداد(به انگلیسی: Event Handlers) جاوا اسکریپت را برای یک عنصر اضافه کرد.

در SVG هر شکل ترسیم شده بعنوان یک شیء در نظر گرفته می‌شود. اگر ویژگی‌های یک شیء SVG تغییر کند، مرورگر می‌تواند شیء را بطور خودکار مجدداً ترجمه کند (به انگلیسی: re-render).

Canvas پیکسل به پیکسل re-render می‌شود. در canvas به وقتی که گرافیک ترسیم شد، توسط مرورگر فراموش می‌شود. اگر نیاز به تغییر مکان آن باشد، کل پرده شامل همهٔ اشیایی که توسط گرافیک پوشش داده شده‌اند، باید مجدداً ترسیم شود.

مقایسه Canvas و SVG

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

Canvas SVG
  • وابسته به resolution (وضوح تصویر)
  • بدون پشتیبانی از event handlerها
  • توانایی‌های render کردن متن ضعیف
  • می‌توان تصویر نهایی را بصورت .png یا .jpg ذخیره کرد
  • بسیار مناسب برای بازی‌های با گرافیک قوی (به انگلیسی: Graphic-intensive)
  • وابسته به resolution
  • پشتیبانی از event handlerها
  • مناسب‌ترین برای برنامه‌های کاربردی با نواحی rendering بزرگ (به انگلیسی: Google Maps)
  • rendering کُند در صورت پیچیدگی (هرچیزی که از DOM زیاد استفاده کند، کُند خواهد شد)
  • نامناسب برای کاربردهای بازی

آموزش SVG

برای یادگیری بیشتر اِس‌وی‌جی، به آموزش SVG ما مراجعه کنید.


منابع آموزشی