Drawing in SVG

Drawing in SVG is easier than drawing a circle with canvas.

Drawing a Circle
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<circle cx="50" cy="50" r="25" fill="red"/>
</svg>
The viewBox attribute defines the starting location, width, and height of the SVG image.

The circle element defines a circle, with cx and cy the X and Y coordinates of the center of the circle. The radius is represented by r, while fill is for the fill style.

To view an SVG file, you simply open it via the File menu in any browser that supports SVG.
Drawing a rectangle
We can also draw rectangles in SVG, and add a stroke to them, as we did with canvas. This time, let’s take advantage of SVG being an XML—and thus text-based—file format, and utilize the desc tag, which allows us to provide a description for the image we’re going to draw.
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 400">
<desc>Drawing a rectangle</desc>
</svg>
Next, we populate the rect tag with a number of attributes that describe the rectangle. This includes the X and Y coordinate where the rectangle should be drawn, the width and height of the rectangle, the fill, the stroke, and the width of the stroke.
snippet
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 400">
<desc>Drawing a rectangle</desc>
<rect x="10" y="10" width="100" height="100"
fill="blue" stroke="red" stroke-width="3" />
</svg>

It’s not always this easy. If you want to create complex shapes, the code begins to look complex.
Related Tutorial