What is SVG?
The HTML <svg> Element
The HTML <svg> element (introduced in HTML5) is known as a container for SVG graphics.
SVG has many methods for drawing paths, boxes, circles, text, and graphic images.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG Circle
Example
<!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>
Try it Yourself
SVG Rectangle
Example
<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>
Try it Yourself
SVG Rounded Rectangle
Example
<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>
Try it Yourself
SVG Star
Example
<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>
Try it Yourself
SVG Logo
Example
<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>
Try it Yourself
Differences Between SVG and Canvas
SVG is used to define a language that is used for describing 2D graphics in XML.
Canvas will be drawing 2D graphics, on the fly (with a JavaScript).
SVG is known to be XML based, which means that elements are available within the SVG DOM. You can also be attaching JavaScript event handlers for an element.
In SVG, each of the drawn shapes are remembered as an object. Incase attributes of an SVG object are modified, the browser will automatically re-render the shape.
Canvas is rendered as pixel by pixel. In canvas, as soon as the graphic is drawn, browser will forget it. If its position nees to be changed, the entire scene should be redrawn, which includes any objects that is already covered by the graphic.
Comparison of Canvas and SVG
The table below illustrates few important differences between Canvas and SVG:
| Canvas | SVG |
|---|---|
|
|
To study more about SVG, please go through our SVG Tutorial.