SVG (Scalable Vector Graphics)

Introduction

In the previous tutorial, you have learned about HTML5 canvas elements, and how to draw basic shapes like square, rectangle and circle using canvas element. In this tutorial, you will learn about SVG Elements. SVG stands for Scalable Vector Graphics. 

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.

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 vs. Canvas

You can prefer SVG over the canvas, but canvas has its importance.

1. SVG supports event handlers whereas canvas elements don’t support event handler.
2. SVG is resolution independent whereas canvas elements are not.
3. SVG is not suitable for games, but Canvas elements are designed for games.
4. 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.
5. 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.
6. 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.

Output

Rectangle

To draw a rectangle use <rect /> self-closing tag inside <svg> tags. You can also apply CSS properties to the rectangle.

Output

Polygon

The syntax of the polygon is a bit different from others as you need to specify the points to draw the edges of the polygon.

Output

 

Similarly, you can also draw Square using <rect /> tag specifying length = width.

Ellipse using <ellipse /> tag and specifying cx, cy and rx, ry axis for ellipse.

Hope you like this tutorial. Stay Tuned for more upcoming tutorials. Stay Blessed!
Don’t forget you give your feedback through comments.