HTML SVG

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily.

SVG is a XML based format to draw vector images. It is used to draw two dimentional vector images.

• SVG stands for Scalable Vector Graphics
• SVG is used to define graphics for the Web
• SVG is a W3C recommendation

Browser Support SVG

It is partially implemented in Firefox, Opera, WebKit browsers, Internet Explorer and other browsers.

HTML SVG Element

The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

SVG Circle & Rectangle

<svg width="100" height="100">
     <circle cx="50" r="40" stroke="pink" stroke-width="4" fill="red" />
</svg>

<svg width="200" height="100">
     <rect width="200" height="100" style="fill: green; stroke-width: 5; stroke: black" />
</svg>

Output

Rounded Rectangle

<svg width="400" height="180">
<rect  width="150" height="150" x="50" rx="20" ry="20" style="fill: pink; stroke: blue; stroke-width: 5; opacity: 0.7" />
</svg>

SVG Advantages

• Use any text editor to create and edit SVG images.
• Being XML based, SVG images are searchable, indexable and can be scripted and compressed.
• SVG images are highly scalable as they never loses quality no matter how they are zoomed out or resized
• Good printing quality at any resolution
• SVG is an Open Standard

Comparison between Canvas and SVG

To learn more about SVG and Canvas

HTML Canvas Tutorials

HTML SVG Tutorials