Part of the SVG Backgrounds Reading List

Cet article est également disponible en français

Resolution independent, small in file size and easy to edit, vector images have several advantages when it comes to designing web page backgrounds over CSS gradients:

  1. SVG syntax for stripes is easier and less verbose than CSS gradients.
  2. SVG backgrounds have better browser support (SVG is supported in IE9, but CSS gradients are not supported in Internet Explorer until v10).
  3. SVG backgrounds can be made much more complex than those made with pure CSS.

But to be effective, vector illustrations need to follow a few rules:

General Guidelines

  • Just like repeated , you only need one seamless “tile” or <pattern> of an SVG for it to be usable: you don’t have to build the whole thing.
  • Keep the SVG file as small, “light”, and editable as possible: this usually means a little hand-editing and tweaking.
  • It’s a good idea to keep at least one of the background in your CSS for the greatest flexibility.

A few examples should be enough to get you started. Note that these concentrate on repeated backgrounds: giant single SVG backgrounds are treated much the same way as giant bitmap background images.

Simple SVG Stripes

A simple “stripe” effect is nothing more than a filled area beside a blank space, repeated infinitely. In the case of SVG, the easiest way to make this filled area to use a rectangle element. Save the following code as stripe.svg: 

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
    <rect width="0.5" height="1" />
</svg>

This SVG file can be applied to the background of a web page using: 

body {
	background-image: url(stripe.svg);
}

By default, the SVG will expand to cover the entire space of the element. This effectively divides the page into half black (the default fill of the SVG rectangle) and half white (the default background color of the web page, as any area not explicitly colored in SVG is automatically transparent).

To make this SVG pattern repeat more than once, we can change the background-size in the CSS declaration: x width, followed by y height. 

body {
    background-image: url(stripe.svg);
    background-size: 20px 20px;
}

This produces:

One nice aspect of having a small “tight” SVG illustration is that it’s easy to change this from a vertical to a horizontal stripe by altering the background-size:

Horizontal Pinstripe: body { background-size: 1px 10px; }

Vertical Pinstripe:: body { background-size: 10px 1px; }

For more versatility, you could color the stripe using rgba or hsla, and address the background-color of the page in the CSS: 

<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
	<rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" />
</svg>

The CSS: 

body {
	background-image: url(stripe.svg);
	background-size: 20px 20px;
	background-color: #669;
}

This SVG file is small enough to write inline into the CSS itself, saving an HTTP request: 

body {
	background-image:  url('data:image/svg+xml;utf8,<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" /></svg>');
	background-size: 20px 20px;
}

You could also base64-encode the SVG file and use that inline in the CSS: 

body {
    background-image:  url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMiAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjIiIGZpbGw9ImhzbGEoMzIsIDQyJSwgNTAlLCAuNSkiIC8+PC9zdmc+');
}

Doing so is optional, and does have three disadvantages:

  • the DataURI version takes up more space than the inline SVG
  • converting the image into base64 makes it non-editable (to make any changes, you’d have to find the original SVG, edit it, convert the result into base64, and add the new code back into the CSS).
  • unencoding base 64 is slower on mobile platforms.

However, using base-64 SVG inline does give you a little more cross-browser compatibility; ultimately, the decision is up to you.

Separating The Lines

It’s easy to make the lines thicker and thinner in our example using background-size, but the one thing this won’t do is change the ratio between the thickness of the lines and the space between them. To alter that, we go back to the SVG and make the rectangle narrower or wider: 


<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
	<rect width=".25" height="1" />
</svg>

Which produces:

Making More Complex Patterns

Once you have the basics, it’s easy to produce more complex variations of horizontal and vertical stripes in SVG. For example, a gingham pattern would be a ⅓ width rectangle overlaying a ⅓ height element: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g fill="rgba(0,0,0,0.3)">
    <rect width="100" height="33" />
    <rect width="33" height="100" x="67" />
  </g>
</svg>

You can see a variation on this technique at the top of this article, incorporating stroke-dasharray to provide further decoration: a good example of a pattern that is impossible to achieve with CSS gradients.

The same concepts can be used to create plaids and tartans, although the more complex of these should probably use SVG’s <pattern> syntax, discussed in the next article.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/wamppp