Did you know that you can create graphics with HTML elements? If not, here is a surprise. This chapter will teach us how to draw graphics with HTML <svg> tag.

SVG stands for scalable vector graphics. With SVG, you can create vector-based graphics in XML format.

Line

Let's draw a Line for our first example. The <svg> tag only creates a space for drawing graphics. To draw objects, you have to use relevant tags. For example, to draw a Line, you must use the <line> tag inside the <svg> tag.

As you can see, the <line> tag has several attributes. All of them are important to draw a proper line:

• x1 and y1 attributes are used to define starting coordinates of the line;
• x2 and y2 attributes are used to define the ending coordinates of the line;
• stroke and stroke-width define the line's color and width.

You can draw different lines by changing the values assigned to these attributes.

Circle

For our following example, we will create a circle. Here we will use the <circle> tag for that.

Let's understand what happens in the code:

• cx, cy - specify the coordinates of the center of the circle;
• r - radius of the circle;
• stroke, stroke-width - size and the color of the border of the circle;
• fill - the color of the inside space of the circle.

You can play around with this code by changing the values of the circle attributes.

Rectangle

Here we have used the <rect> tag instead of the <circle> tag. For rectangular, we don't have to specify a center or radius. But we need to use width and height attributes. In the same way, you can draw ellipses and polygons as well. For that, you have to use the relevant tags and their attributes.