SVG در HTML5
SVG چیست؟
- SVG مخفف بردارهای گرفیکی مقیاس پذیر (Scalable Vector Graphics) است[۱]
- SVG برای تعریف گرافیک در وب استفاده می‌شود
- SVG توصیهٔ W3C است
عنصر <svg> در HTML
عنصر <svg> در HTML یک ظرف (Container) برای گرافیک SVG است.
SVG متدهای مختلفی برای رسم مسیرها، کادرها، دایره‌ها، متن و تصاویر گرافیکی دارد.
پشتیبانی مرورگر
اعداد در جدول زیر نشان دهنده اولین نسخه مرورگرها هستند که بطور کامل از عنصر <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 یک زبان برای توصیف گرافیک‌های دوبعدی در XML است.
Canvas گرافیک دو بعدی در زمان اجرا (با جاوا اسکریپت) ترسیم می‌کند.
SVG برپایه XML است که یعنی همهٔ عنصرها در داخل SVG DOM موجود هستند. می‌توان کنترل کننده‌های رویداد (Event Handlers) جاوا اسکریپت را برای یک عنصر اضافه کرد.
در SVG هر شکل ترسیم شده بعنوان یک شیء در نظر گرفته می‌شود. اگر ویژگی‌های یک شیء SVG تغییر کند، مرورگر می‌تواند شیء را بطور خودکار مجدداً ترجمه کند (re-render).
Canvas پیکسل به پیکسل re-render می‌شود. در canvas به وقتی که گرافیک ترسیم شد، توسط مرورگر فراموش می‌شود. اگر نیاز به تغییر مکان آن باشد، کل پرده شامل همهٔ اشیایی که توسط گرافیک پوشش داده شده‌اند، باید مجدداً ترسیم شود.
مقایسه Canvas و SVG
جدول زیر برخی از تفاوت‌های مهم بین Canvas و SVG را نشان می‌دهد:
| Canvas | SVG |
|---|---|
|
|
آموزش SVG
منابع آموزشی