Scalable Vector Graphics

Scalable vector graphics belongs to the family of vectors in graphics. You can draw different shapes by using vector graphics. It is used for 2-D designing in XML. As you can use it to draw pie charts and other kinds of charts. As vector graphics make use of X and Y axis to draw anything on the screen. SVG became recommended from w3 you can read more about SVG versioning and specifications here.

Syntax

You can use SVG with simple tags.

1

2

3

<svg height="400px"with="300px">

</svg>

Common Components of SVG Elements

SVG have following components through which it draws shapes on the screen.

stroke is the outline or border color of the shape. ()

stroke-width is the width of the border of shape.

cx defines the x-axis of the circle to be drawn.

cy defines the y-axis of the circle to be drawn.

r defines the radius of the shape i.e. circle to be drawn.

height is used to specify the height of the element.

width is used to specify the width of the element.

Advantages of SVG

The best thing about SVG is its small size as compared to JPG, PNG, and GIF. So the load time of a page using SVG graphics is comparatively less than the pages using PNG and JPG format images. You must be thinking about the other properties that the traditional graphics has, so the good news about SVG is that it more efficient than other formats as well as SVG graphics can also be compressed, indexed for SEO, and can be scripted in your web pages. You can create and modify SVG graphics using JavaScript. These graphics can be printed with any resolution. You can also animate SVG graphics on runtime. Like other graphics format, you can place a hyperlink to any other page on SVG graphics. Each of the SVG Element acts as an object so you can apply any DOM function on it.

SVG is not suitable for games, but Canvas elements are designed for games.

SVG is suitable for large rendering areas like if you want to render on the whole screen whereas canvas elements are not suitable for large rendering areas.

SVG elements act as DOM elements, so they are not forgotten but in the case of canvas elements, once when a pixel is drawn it is forgotten. If the changes are required, you need to re-draw the whole shape from the start.

SVG has slow rendering speed when the design is complex as compared to canvas.

Draw Shapes using SVG

Using SVG, you can draw simple shapes easily.

Circle

To draw a circle use <circle /> self-closing tag inside <svg> tags. You can also specify the radius of the circle with stroke and color.