All you need to know about SVG on the web

SVG makes it easy to create a number of basic shapes. Here's how to make circles, rectangles, lines and polygons, as well as create paths and curves.

Circles in SVG

There are three attributes to use to create a circle. They include:

• r – The radius of the circle.
• cx – The x position of the centre of the circle.
• cy – The y position of the centre of the circle.

The code to draw a circle is very easy to use. You can set the stroke colour and fill colour inline or separately as well. Here's an example:

<svg width="200" height="250">
  <circle cx="400" cy="300" r="200" stroke="red" fill="transparent" stroke-width="5"/>
</svg>

Rectangles in SVG

In a similar way to making circles, you can create rectangles, using x and y for position, then height and width attributes to define the size. The code looks like this:

<rect x="100" y="100" width="400" height="300" stroke="black" fill="transparent" stroke-width="5"/>

Lines in SVG

Lines in SVG are for straight lines. They take as attributes two points that specify the start and end point of the line. Here's an example:

<line x1="100" x2="500" y1="110" y2="450" stroke="orange" stroke-width="5" />

Polygons in SVG

You can also create any kind of polygon shape using the polygon element, which will conveniently return to the first point for you after the end of your list of points. Here's a quick example of drawing a polygon:

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30, 180, 45 180"/>

Making paths and curves in SVG

The <path> element is extremely powerful for making shapes. You can use it to create lines, curves, arcs and more. You can even use it with text to create text that flows along paths.

Drawing lines in SVG

To draw a line or curve, you use the path element and define the path using the d attribute. You can move the start of a line using the M command for absolute positioning and the lower case m for relative positioning. You use the L command to draw a line to a new point. Here is a quick example of a line:

<path d="M 10,10 L 250,250" fill=“transparent" stroke=“black"/>

Here is an example of multiple lines, to show you how easy it is:

<path d="M 10,10 L 250,250 30,100 150, 50" fill="transparent" stroke="black"/>

Drawing curves in SVG

You can also use the C command to draw curves.  Use the M command to set the start position, and then list the start, the anchor point and the end point like this:

<path d="M50 50 C 50 50, 150 100, 250 50" stroke="black" fill="transparent"/>

You can also string curves together using the S command  to make even more complex curves like this:

<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

There are plenty of curves and paths you can create. There is a great resource for learning even more about paths here.

Next page: Text and CSS styles