SVG چیست
SVG چیست ؟ SVG مخفف چه کلمه ای است؟
آموزش گرافیک HTML درس دوم
SVG چیست : SVG مخفف عبارت Scalable Vector Graphics است. برای تعریف گرافیک سایت استفاده می شود و W3C آن را توصیه کرده است.
عنصر<svg> در html
عنصر<svg> مکانی برای گرافیک های SVG است. SVG چندین روش برای کشیدن خطوط، دایره ، تصاویر و اشکال مختلف دارد.
پشتیبانی مرورگر
اعدادی که در جدول زیر نشان داده شده است نسخه اول مرورگر است که به طور کامل ازعنصر <svg> پشتیبانی می کند.
| Element | کروم | اینترنت اکسپلورر | فایرفاکس | سافاری | آپرا |
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG دایره ای
مثال :
[php]
<!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>
[/php]
SVG مستطیلی
مثال:
[php]
<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>
[/php]
SVG مستطیل گرد
مثال :
[php]
<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>
[/php]
SVG ستاره ای
مثال :
[php]
<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>
[/php]
SVG لوگو
مثال :
[php]
<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>
[/php]
تفاوت بین SVG و Canvas
SVG یک زبان برای توصیف گرافیک 2D در XML است.
canvas گرافیک 2D قابل حرکت (با جاوا اسکریپت) ترسیم می کند.
SVG مبتنی بر XML است، به این معنی که هر عنصر در SVG DOM موجود است. شما می توانید دسته های رویداد جاوااسکریپت را برای عنصر اضافه کنید.
در SVG هر شکل کشیده شده به عنوان یک شیء ارائه می شود. اگر ویژگی یک شیء SVG تغییر کند، مرورگر می تواند به صورت خودکار شکل را مجدد ارائه دهد.
canvas پیکسل به پیکسل ارائه شده است. در canvas، هنگامی که گرافیک کشیده شده است، توسط مرورگر فراموش می شود. اگر موقعیت آن بایستی تغییر داده شود، باید تمام کد را بازنویسی کرد، از جمله هر گونه اشیایی که ممکن است توسط گرافیک پوشش داده شود.
مقایسه SVG و Canvas
جدول زیر مهم ترین تفاوت های بین SVG و Canvas را نشان می دهد:
| Canvas | SVG |
|---|---|
|
|
دیدگاهتان را بنویسید