SVGگرافيك مبناي برداري را در فرمت XML تعريف مي نمايد .
عنصرHTML <svg> محفظه ايست براي گرافيك SVG ،آن داراي متد هاي مختلفي براي ترسيم مسيرها . باكسها، دواير،متن وتصاوير گرافيكي است.
در جدول زير اولين نسخه مرورگرها كهSVG را پشيباني ميكنند آمده است .
| مرورگر | Chrome | Internet Explorer | Firefox | Safare | Opera |
|---|---|---|---|---|---|
| نسخه | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
مثال ـ دايره درSVG
ترسيم مستطيل در مثال -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>id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> </defs>style="stop-color:rgb(255,255,0);stop-opacity:1" /> style="stop-color:rgb(255,0,0);stop-opacity:1" /> SVG Sorry, your browser does not support inline SVG. </svg>
SVGزبانيست براي توصيف گرافيك دوبعدي در XML
Canvasبراي ترسيم گرافيك دوبعدي در لحظه با جاوااسكريپت .
SVGمبناي XML است ، يعني كه هر عنصر در داخل SVG DOM وجود دارد .در اين حالت ميتوان كنترل كننده هاي رويداد جاوااسكريپت را به آنها وصل نمود.
در ترسيم اشكالSVG آنها بعنوان شئى در نظر گرفته ميشود، كه ميتوان ويژگي هاي مرتبط با آنرا تغييرداد .مرورگر ميتواند با تغيير اندازه ها، آن شي را نمايش دهد.
ترسيم بوم پيكسل به پيكسل در بوم ارائه ميشود .هنگاميكه شكل ترسيم ميگردد ، توسط مرور گر فراموش ميشود .در تغيير اندازها بايد متناسب با آن دوباره ترسيم گردد .ومرورگر درگير تغيير نمي شود.
در جدول زيرچند تفاوت بين آنهارا نشان ميدهد.
| SVG | Canvas |
|---|---|
|
|