گروه مقاله : HTML 5
تاريخ انتشار : 1394/02/29 - 12:19
كد :482
-
SVG مخفف کلمات Scalable Vector Graphics (گرافیک برداری مقیاس پذیر) می باشد.
-
SVG برای ایجاد گرافیک های برداری در صفحات وب بکار می رود.
-
SVG یکی از توصیه های کنسرسیوم w3 می باشد.
در HTML5، عناصر SVG را می توان به طور مستقیم در صفحه HTML جاسازی کرد.
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 9+, Firefox, Opera, Chrome, Safari عنصر <canvas> را پشتیبانی می کنند.
دایره در 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> در HTML5 از روش اسکریبت نویسی (معمولاً JavaScript) برای رسم گرافیک های دو بعدی در یک صفحه وب استفاده می کند.
XML بودن فایل های SVG باعث می شود که دسترسی به عناصر موجود در فایل SVG با توجه به مدل DOM امکان پذیر باشد. همچنین می توانید رویدادهای مختلف JavaScript را به هر عنصری اضافه نمایید.
در SVG، با هر شکل، مانند یک Object برخورد می شود. اگر ویژگی های Object تغییر کند، مرورگر می تواند به طور خودکار دوباره شکل را بازسازی کند.
در Canvas، با اشکال، پیکسل به پیکسل برخورد می شود و هنگامی که شکل رسم شد، دیگر در مرورگر قابل دسترس نیست. اگر نیاز است که موقعیت آن عوض شود، باید کل شکل، دوباره ترسیم شود.
مقایسه Canvas و SVG
جدول زیر مهمترین تفاوت های Canvas و SVG را نشان می دهد:
|
Canvas |
SVG |
-
وابسته به Resolution است.
-
رویدادها را پشتیبانی نمی کند.
-
قابلیت rendering متن زیاد است.
-
می توان تصاویر را با فرمت png. یا jpg. ذخیره کرد.
-
برای ساخت بازی مناسب است.
|
-
مستقل از Resolution است.
-
رویدادها را پشتیبانی می کند.
-
مناسب ترین گزینه برای برنامه هایی با نواحی rendering بزرگ.(مانند نقشه گوگل)
-
در صورت پیچیدگی سرعت rendering پایین است.
-
برای ساخت بازی مناسب نیست.
|