10 - HTML5 SVG

Introduction

SVG stands for Scalable Vector Graphics and it is used to define graphics. HTML5 introduced a new element <svg> which is a container for SVG graphics. You can draw different shapes using this element.

More About SVG

Similar to any other HTML element, you should add the <svg> tag wherever you want to display the svg. You can add a fallback content between the opening and closing <vg> tags so that the particular text will appear if the viewer’s browser does not support the HTML5 <svg>. You can set the height and width of your svg using height and width attributes. You can also use tags like <line>, <rect>, <circle>, <ellipse>, <polyline>, <polygon> and <text> and attributes like stroke, fill, stroke-width, stroke-opacity, fill-opacity and opacity to draw different shapes in different styles.

Line

You can add the <line> tag inside the <svg> element to draw a line. You can specify the x and y coordinates of the starting point using x1 and y1 attributes and x and y coordinates of the ending point using x2 and y2 attributes. You can also specify the stroke color using stroke attribute and the width of the stroke using stroke-width attribute. Instead of directly specifying the stroke and stroke-width attributes, you can use style attribute to define these properties.

Rectangle

You can add the <rect> tag inside the <svg> element to draw a rectangle. You can specify the x and y coordinates of the top left point of the rectangle using x and y attributes and the width and height of the rectangle using the width and height attributes. You can make the corners rounded by specifying the radius of the corners using rx and ry attributes. You can also specify the stroke color using stroke attribute and the fill color using the fill attribute. By default the values of stroke and fill attributes are black.

Circle

You can add the <circle> tag inside the <svg> element to draw a circle. You can specify the x and y coordinates of the center point using cx and cy attributes. You can set the radius using r attribute. You can also specify the stroke color using stroke attribute and the fill color using the fill attribute. By default the values of stroke and fill attributes are black.

Ellipse

You can add the <ellipse> tag inside the <svg> element to draw a line. You can specify the x and y coordinates of the center point using cx and cy attributes and the major axis and minor axis using rx and ry attributes.

You can add the <polyline> tag inside the <svg> element to draw any shape that consists of only straight lines. You can specify the x and y coordinates of each point separated by comma and each point separated by space using the points attribute.

Polygon

You can add the <polygon> tag inside the <svg> element to draw a polygon. A polygon is a closed shape made of straight lines. You can specify the x and y coordinates of each point separated by comma and each point separated by space using the points attribute.

Text

You can add the <text> tag inside the <svg> element to write some text. You can specify the x and y coordinates of the starting point of your text using x and y attributes and specify the text between the opening and closing <text> tags.