Using SVG In Web Page Backgrounds: Stripes

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:

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

General Guidelines

• Just like repeated bitmap backgrounds, 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.

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:

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.

Cet article est également disponible en français