All you need to know about SVG on the web
Still using PNG for logos and icons? It's time to learn about SVG.
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.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
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
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
Richard is an award-winning interactive technologist, designer and developer. He specialises in creating interactive worlds with science-fiction themes, exploring the synergy between human and machine. He has also written regular articles for Net Magazine, and Web Designer Magazine on a range of exciting topics across the world of tech, including artificial intelligence, VFX, 3D and more.











