This post is part of a series written for those looking to dive a little deeper into SVG. Understanding SVG coordinates will help you to better optimize your artwork and to locate and solve issues.
What do you mean by SVG coordinates?
While SVG is often used to make graphics for the web and for print, SVG isn’t technically an image, and it has many other uses.
SVGs can be displayed as images but, in contrast to JPGs, PNGs and GIFs, SVGs are drawn by the browser using a set of coordinates. SVGs also have many other uses such as creating shapes and graphics to be cut by plotters and laser cutters.
SVGs are in fact a collection of one or more geometric shapes which are plotted to a set of coordinates.
Let’s see this in action!
For the sake of this demonstration, I have placed a virtual grid behind our graphic. This should help you to see what is going on in the code.
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M10,40 30,20" fill="none" stroke="#000" stroke-width="1px"/>
</svg>
Now, let’s break this down
Let us focus on the path tag. Inside this tag you can see d=“M10,40 30,20”. That means:
d = data M = move
The following numbers are coordinates on the grid.
d=“M[x],[y] [x],[y]”
Therefore, this tells the browser “display a grid 100 x 100 units, and on that grid draw a line from point 10,40 to point 30,20.
Absolute and relative values
It should be noted that “M” is absolute, while “m” is relative.
Therefore, “M” means each point is placed relative to the grid, whilst “m” means each point will be placed relative to the last point.
Let’s see what changing “M” to “m” would look like:
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="m10,40 30,20" fill="none" stroke="#000" stroke-width="1px"/>
</svg>
So, what happened here?
The first point was placed in exactly the same position. However, as “m” uses relative coordinates, the second set of digits is relative to the first.
The first point is placed on the point (x)10 (y)40 and the second point is placed (x)40 (y)60.
This is why:
On the x axis, 10 + 30 = 40 On the y axis, 40 + 20 = 60
Keep in mind…
The position of your points will be affected by the size of your viewBox. For this demonstration, we used a viewBox of 100 by 100 (viewBox=“0 0 100 100”) If your viewBox is larger, your graphic will be relatively smaller.
I will go into the viewBox in more detail in a future post, but, for now, play around with drawing straight lines, so you can get a better understanding of SVG coordinates.