How to Use SVG Patterns as Backgrounds

How to Use SVG Patterns as Backgrounds

How to Use SVG Patterns as Backgrounds

How to Use SVG Patterns as Backgrounds

How to Use SVG Patterns as Backgrounds
How to Use SVG Patterns as Backgrounds
How to Use SVG Patterns as Backgrounds How to Use SVG Patterns as Backgrounds How to Use SVG Patterns as Backgrounds How to Use SVG Patterns as Backgrounds How to Use SVG Patterns as Backgrounds

How to Use SVG Patterns as Backgrounds

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:

  1. We’ll begin by looking at the more familiar method of CSS tiling.
  2. Then we’ll create a couple of SVG patterns, learning the proper syntax as we go.
  3. We’ll compare the two approaches and discuss the pros and cons.
  4. Next up, we’ll look at a few tools which you can use to create SVG patterns.
  5. 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:

Begin With an SVG

To start off, we’ll create an svg element, giving it a height and width of 100% so that it occupies whatever container we place it in.

To create a pattern we have to place it in the defs (definitions) section of the svg, like so:

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):

Having setup those parameters, we now need to define the image which will be repeating. Let’s create a basic circle:

No pattern will yet be visible, but that’s because we’ve defined it without actually applying it to anything. Let’s change that by applying it to a <rect> outside of our <defs>.

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
  • Lower performance
  • More difficult to customize
  • Limited to rectangular repetitions

😀 SVG pattern pros:

  • Lightweight
  • Customize from CSS
  • Scalable
  • 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!

5. Browser Support

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.

Conclusion

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.

Learn More