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.
You can use SVG with simple tags.
<svg height="400px" with="300px">
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
SVG vs. Canvas
You can prefer SVG over the canvas, but canvas has its importance.
- SVG supports event handlers whereas canvas elements don’t support event handler.
- SVG is resolution independent whereas canvas elements are not.
- 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.
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.
<svg width="150" height="150">
<circle cx="80" cy="60" r="50" stroke="black" stroke-width="2" fill="blue" />
To draw a rectangle use <rect /> self-closing tag inside <svg> tags. You can also apply CSS properties to the rectangle.
<svg width="400" height="100">
<rect width="400" height="100" fill="green" stroke-width="6" stroke="rgb(0,0,0)" />
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.
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="black" />
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.