Level up with SVG

When it comes to improving with SVG I don’t have many shortcuts. The most direct instruction I can offer is to practice, go through the effort of authoring the syntax yourself. There is no shortage of visuals to draw line by line, with the many elements and attributes available. And truthfully, you don’t even need a great number to rehearse.

Consider a humble square. You are able to draw the polygon with a <rect> element where the width and height attributes are in perfect accord.

<rect width="1" height="1" />

There are many ways to style the shape, but if you need more than one copy, you benefit from a pretty solid technique:

add an id to the element

<rect id="square" width="1" height="1" />

re-introduce the shape with <use> elements

<use href="#square" fill="hsl(0 0% 30%)" /> 
<use x="1" href="#square" fill="hsl(0 0% 80%)" />

You can separate the copies with the x and y attributes and paint the squares with a different fill. The color ripples through the definition, so that you are able to create different types at a moment’s notice.

And you don’t have to stop here. Say you want to repeat the squares in the colored version. Add an id to the <use> elements and repeat the process. Unique string on one side.

<use id="square-dark" href="#square" fill="hsl(0 0% 30%)" />
<use id="square-light" href="#square" fill="hsl(0 0% 80%)" />

Copies with additional <use> elements

<use href="#square-dark" />
<use x="1" href="#square-light" />
<use y="1" href="#square-light" />
<use x="1" y="1" href="#square-dark" />

Four squares, interspersed in a checkered pattern are appealing already.

But if you care about repeating the sequence more often, the <pattern> element is a more fitting option. And the beauty is that you can keep the same code.

Start by wrapping the copies in the element, again with a particular label in the id attribute.

<pattern id="squares" width="0.5" height="0.5" viewBox="0 0 2 2">
	<!-- ...uses -->
</pattern>

The viewBox matches the dimensions of the checkerboard, to create the tightest fit.

The width and height attributes, then, help you decide how many times to repeat the drawing. By default the values are relative to the area on which you apply the pattern.

Use then a square — the shape might be familiar to you —, and point to the pattern in the fill attribute.

<use href="#square" fill="url(#squares)" />

0.5 in both dimensions means the pattern is repeated twice. The squares appear in four columns and rows. Halve the value and the repetition is reinforced, doubled.

You may have started with the one square, but by now you have at least five uses. Five variants. And this is one place where rigid logic benefits from an artistic touch. A perfect showcase of how SVG is both math, vector, and art, graphic.

You can position the shapes in any which manner. With experimentation, and enough patience, you can build even the most impressive grid.

And if you are so satisfied with the result that you want to make the grid into a pattern itself, you know how. Another <pattern> element.

Group the elements in the common container, add an id, width and height.

And if you prefer a fixed size, perhaps you don’t want to scale the grid relative to the final area, get to know the patternUnits attribute. The default value, objectBoundingBox, leads to the result you have already seen, where the pattern occupies a fraction of the surface. Set the attribute to userSpaceOnUse and the dimensions are absolute.

<pattern id="grid" patternUnits="userSpaceOnUse" width="1" height="1" viewBox="0 0 4 4">
	<!-- ...uses -->
</pattern>

The whole exercise might seem ludicrous, but is far from pointless.

<rect fill="url(#grid)" width="3" height="2" />

How to draw shapes, how to repeat instances and how to repeat several more copies. With the effort, you have already sampled a few features and what makes SVG remarkable.

The specification has certainly more elements, more attributes, and to master them, you just need to practice. And perhaps a good use.