<svg> element stands for Scalable Vector Graphics. And this element allows us to create vector graphic using only HTML element. It uses XML for its graphic designing and easily creates basic graphics like a box, circles, text, and graphic images.
It may be possible that the old version of the browser does not support <svg> so make sure that you have the latest version.
Like the <canvas> element <svg> also define a rectangular or square container and the graphic design in that container.
<svg width="100" height="200" style="border: solid red"> </svg>
Draw a Circle
To draw a circle, we will use the
<circle> element within the
<svg width="200" height="200" style="border: solid red"> <circle cx="100" cy="100" r="80" stroke="blue" stroke-width="4" fill="orange" /> </svg>
Draw a Rectangle
To draw a rectangle, we can use the
<rect> element. Make sure that the width and height of the box must be equal or less than
<svg> height and width.
<svg width="400" height="200" style="border: solid red"> <rect width="400" height="200" style="fill:red; stroke-width:10;stroke:rgb(0,100,0)" /> </svg>
Draw a Rectangle with Rounded Edges
To make the edges rounded we use the
ry attributes within the
<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:blue;stroke:black;stroke-width:4;" /> </svg>
Similar to this, we can design many other simple graphics using only HTML and CSS.
Canvas Vs SVG
|It does not provide a good rendering quality.||Its rendering quality is very high, and especially udder for large object rendering.|
|Its graphic output can be saved as an Image.||The graphic can not be saved as an image.|
|It is best suited for online game graphics.||Not suited for game graphic because of the slow rendering process.|
- SVG stand for scalable vector graphics.
- It uses XML formating for graphic designing.
- The end graphic result can not be saved as an image.
- <svg> provide high quality graphics.
- Google maps use <svg> over <canvas>.