SVG patterns offer a more flexible approach to repeating a background image on a web page than CSS tiling. Let’s look at why that is, and how you can use them.
What You’ll Learn
This tutorial is available in both video and textual form–here’s a breakdown of what you’ll learn:
We’ll begin by looking at the more familiar method of CSS tiling.
Then we’ll create a couple of SVG patterns, learning the proper syntax as we go.
We’ll compare the two approaches and discuss the pros and cons.
Next up, we’ll look at a few tools which you can use to create SVG patterns.
Finally, we’ll check browser support for SVG.
Watch the Screencast
1. CSS Tiling
Let’s start by checking out CSS tiling–the more traditional method of repeating an image for a background. The idea is straightforward: we pass a URL to the background property of the element we want to cover. The URL points to an image file, in this case a PNG file. By default our image will repeat along both axes.
Here’s how that looks:
2. SVG Patterns
Let’s now take a look at SVG patterns–something which, when first encountered, is a little more difficult to understand. We’ll begin by hand-coding an example.
Hand Coding SVGs
For a refresher on how to hand code all the various parts of an SVG, these two beginner’s tutorials by Kezz Bracey are really helpful:
Now let’s add some attributes to that pattern element. We’ll give it an ID so we can reference it later, then we’ll specify starting X and Y coordinates, width and height values, and state that the patternUnits are userSpaceOnUse (this defines the coordinates system, which you can read more about on MDN):
Crucially, you’ll see the fill attribute (which might usually be a color value or name) points to a URL containing the ID of our newly defined pattern: fill="url(#polka-dots)".
Check out the demo below:
A More Complex SVG Pattern
For a more complex example we’re going to leave hand-coding behind and generate a pattern using a third party tool. We’ll use heropatterns.com, a website which allows you to select predefined SVG patterns, alter their colors and attributes, then copy the generated code.
I’m going to use the jigsaw pattern:
Instead of copying the generated CSS in its entirety, I’m going to copy just the d="" parameter, which is the actual path drawn.
The svg code that we set up will be almost exactly the same as our previous example. The ID within the <pattern> will be different of course, and we’ll give it slightly different dimensions according to what’s used on heropatterns.
So where, in our last example, we defined a <circle>, this time we define a <path>. We give it a fill color, then we paste in the path we copied a moment ago. This is what that gives us:
3. CSS Tiling Vs. SVG Patterns
😀 CSS tiling pros:
Easier to use, certainly for beginners
Enjoys wide browser support
😡 CSS tiling cons:
When used with bitmaps it isn’t scalable
More difficult to customize
Limited to rectangular repetitions
😀 SVG pattern pros:
Customize from CSS
Able to create complex patterns
😡 SVG pattern cons:
Relatively difficult to use
Non-universal browser support
4. SVG Pattern Tools
Take a look at these four resources, which can be really useful for generating actual code and ideas!
SVG is a widely supported technology, even in older browser such as IE9. Some SVG features, however, don’t enjoy support to such an extent, and there really isn’t much information available for the specifics of <pattern> properties (such as patternUnits, patternContentUnits, patternTransform etc.). There are some useful links below, including documentation by Mozilla–they’ll give you a sense of what information is currently available.
From my own tests I can tell you that modern browsers on both Windows and Mac OS all dealt with SVG patterns just fine. Even down to IE11.
Let’s sum up the key points of this tutorial.
SVG patterns can be used to create repeatable backgrounds.
They offer a viable and more customizable alternative to CSS tiling.
They have a fairly simple (if detailed) syntax. Define your pattern within the defs, make sure it has an ID, then reference that ID in your shape of choice.
There are many advantages of using SVG patterns, as we outlined.