Lately I’ve been spending a some time building SVGs.
When I told my colleagues about what I was doing they asked me to write a short guide about what exactly that is and what you can do with it.
Since I got those questions, i thought that might be interesting for others out there, so here goes nothing:
First of all: what is SVG?
Just like JPEG or PNG, SVG is an image format, which lets us display images or graphics on the web.
SVG stands for ‘Scalable Vector Graphics’ – You might have heard about vectors in a different context already, like maths class or physics maybe?
The concept is the same: there is a direction and a force which helps to describe a path.
This means, that those graphics do not consist of fixed pixel values, but instead they’re a set of directions for whoever renders it (usually the user agent / browser) to follow.
SVG is written in a format that resembles XML, which means you have your image in a human readable plaintext file!
Why does that make it special?
The fact, that the graphics are made up with vectors comes with a bunch of useful qualities:
- Scalability: It doesn’t matter, if you make the image 30x30px or 3000x3000px, it will stay sharp
- Responsiveness: Because of its’ scalability you can have it take up whatever space you need it to
- Programmable: Since your image is basically a text file, you can modify it programmatically as well, which gives it a flexibility unmatched by other common options.
- Performance: Since we’re not sending out a binary blob of pixels but a text file, there is next to no loading time for the images.
The most common use cases are logos, icons and icon fonts, animations and diagrams.
What does it look like?
This is a simple svg, which we will be building together over the course of this blogpost:
First we define a simple 20×20 “coordinate system”, where 0,0 is in the top left corner.
In the viewBox we define what part of the SVG we will see when it is rendered. Positive x values move to the right and positive y values move downwards.
<svg viewBox="0 0 20 20"></svg> For a better understanding of the slightly mind-fucky topic of the viewBox property, check this out.
To start of with we want to draw the head:
For that we just use a <rect> element to draw a rectangle that fills the entire space.
<rect class="body" width="20" height="20"></rect>
The eyes consist of two <circle> elements that we position with cx and cy and give them a radius r of 1 unit.
<circle class="eye" cx="5" cy="15" r="1"></circle>
<circle class="eye" cx="15" cy="15" r="1"></circle>
When you put everything together the code for it looks something like this:
<svg viewBox="0 0 20 20"> <rect class="body" width="20" height="20"></rect> <circle class="eye" cx="5" cy="15" r="1"></circle> <circle class="eye" cx="15" cy="15" r="1"></circle> </svg>
So far we’d only have a black box, but as you might have noticed, I also added the class attribute into the elements.
This is for styling the SVG via CSS.
It is also possible to style the elements within their tags, but using CSS is usually preferred, since it makes it possible to style images with user themes as well!
This is the CSS:
.eye {
fill: #444;
}
.body {
stroke-width: 2;
stroke: #444;
fill: #f15a22;
}
The drawn lines can be edited with stroke and if the fill attribute changes the colour that fills up the shape:
You can find the pen here.
Drawing our own images
Combining shapes is all nice and cool, but there are a lot more you can do with SVGs – for example create your own shapes.
We can do this with the path element. For it to know what to draw it needs the d attribute in which we can describe the path of the element.
<path d="M1,2 l4,4 h10 l4,-4 v17 h-18 Z"></path>
The d attribute has a syntax consisting of a few letters and a lot of numbers, that can look quite scary and unreadable at first, but when we break it down, it should look a lot clearer:
The letters are the commands and the numbers are their passing values.
M is the first command used. It’s the move command – so what it does is move the cursor to the position indicated by the numbers and is the starting point for our path.
M1,2 means it starts one unit to the right and two down.
The letters for the commands can either be uppercase to indicate absolute values or lowercase to indicate values that are relative to the last point we drew.
While m4,0 means “Move the cursor 4 units to the right”, M4,0 means move it to the position 4,0.
Basic commands for drawing lines
The next commands we want to look at describe straight lines:
L: any direction
H: horizontal
V: vertical
Z: last element for closing path
<path d="M1,2 L5,6 H15 L19,2 V19 H1 Z"></path>
We’re starting at M1,2.
First line is to position 5,6, so 4 to the right and 4 down with L5,6.
Then a horizontal line to H15.
Another line that goes up and to the right with L19,2.
Down to y value 19 with V19.
All the way left to x position 1 with H1Finally, we close the path with the
Z command.
It’s entirely up to you if you want to draw with relative or absolute values, in a 20×20 grid those two would draw the same image:
<path d="M1,2 l4,4 h10 l4,-4 v17 h-18 Z"></path>
<path d="M1,2 L5,6 H15 L19,2 V19 H1 Z"></path>
Adding the path together with the circles from our first head and applying the CSS again the image looks like this:
You can find the pen here.
Getting those round corners
The little fox looks a little square still, so we want to edit it to give it some round cheeks.
For this we use the q command, which stands for ‘quadratic curve’.
The q command requires two points, the one around which the curve should be and the point to which the line will go.
We draw the ears like we have before but instead of going down to the 19,19 corner, we stop 2 units further up.
From the point 19,17 we use the command Q19,19 17,19.
This indicates, that we want to wrap around the 19,19 and end at the 17,19 point.
The d value for this fox looks like this:
d="M1,2 L5,6 H15 L19,2 V17 Q19,19 17,19 H3 Q1,19 1,17 Z"
You can find the pen here.
Next in the series is going to be a bit more in depth about the more advanced commands and we will extend on the foxes head to make it look like this:
So stay tuned!
If you thought this was fun, maybe you want join our development team, to learn more about the SVGs and the like?
0 Comments