SVG images as CSS backgrounds

One neat use of SVG images is to use them as CSS backgrounds. SVG images are small to download, easy to create and have many powerful features that aren’t possible using CSS3 alone, so they are an interesting option when creating complex scalable background images for HTML elements.

They now have pretty good browser support. Using SVG as background images is supported by all the recent version of the desktop browsers and IE9+.

SVG are great option to:

  • Use the same image in containers with varying width and height. They are a much better solution than downloading multiple sliding door images or using sprites.
  • Support multiple resolutions for responsive design, zoom or printing.
  • Change the styling of the images using CSS – the styling can even live in your main stylesheet.
  • Dynamically generate images with a server side language since it is a text format that is fast and easy to generate.
  • Need a large image with a small file size because unlike a raster image, a vector image’s file size only gets larger as the image becomes more complicated, not as the width and height increase.
  • Create a complicated background that uses advanced SVG features not supported by CSS3.

Using SVG images in CSS

Using a SVG is exactly the same as using a regular image:

  1. a {
  2.   background-image: url(svg-css-background.svg);
  3. }

tabs with SVG as background image
See complete example

Background-sizing

There is a new CSS3 property called background-size that adjusts how the background image is displayed on the HTML element. The background-size property can take width and height values, or the contains or cover keywords.

Contains means that the background will be sized so the whole image will be displayed. If the aspect ratio of the image isn’t the same as the aspect ratio of the element, the image will either tile or empty space will be displayed.

Cover means that the background will be sized so the whole HTML element is covered. If the aspect ratio of the image isn’t the same as the element, some of the image will be cropped.

  1. a {
  2.   background-image: url(svg-css-background.svg);
  3.   background-size: cover;
  4. }

Creating SVG images that will fit any container

If the SVG image has width and height or viewbox (aspect ratio) information in it, the browser will respect the image’s aspect ratio:

  1. <svg xmlns:dc="http://purl.org/dc/elements/1.1/"
  2.   xmlns:svg="http://www.w3.org/2000/svg"
  3.   xmlns="http://www.w3.org/2000/svg"
  4.   xmlns:xlink="http://www.w3.org/1999/xlink"
  5.   version="1.0"
  6.   width="200"
  7.   height="50"
  8.   viewBox="0 0 200 50">
  9.   …
  10. </svg>

To make an image that will be scaled fit into any space without worrying about aspect ratio, set the width and the height to 100%:

  1. <svg xmlns:dc="http://purl.org/dc/elements/1.1/"
  2.   xmlns:svg="http://www.w3.org/2000/svg"
  3.   xmlns="http://www.w3.org/2000/svg"
  4.   xmlns:xlink="http://www.w3.org/1999/xlink"
  5.   width="100%"
  6.   height="100%"
  7.   >
  8.   …
  9. </svg>

This is particularly useful for making reusable, stretchy, resizable backgrounds for things like tabs, buttons and content boxes.

Mozilla have some detailed information about how Firefox figures out how to display your image.

Issues with scaling

Right now in 2013 Firefox has some issues scaling up SVG images.

This is because they create a bitmap of the image from the SVG and don’t redrawing it in certain situations where you want it bigger than its original size like when you set the image size using the CSS background-size property or when you use the browser to zoom into the image.

The way to work around this is to set the width and height of the image inside the SVG larger than you actually need it so it won’t lose detail when zoomed. The disadvantage is it will take up more memory, which could be a particular issue on mobile devices.

There are also similar issues with IE10.

Creating the SVG image

SVG images are just text so you can create them in any text editor. There are also heaps of tools to that create SVG images. Inkscape is quite a nice open source tool to use or if you have Adobe software, you could use Illustrator.

The SVG file that your tool creates might not be particularly optimised, so you can run it through an optimiser if file size is important to you.

If you have EPS files that you want to convert to SVG, it’s possible to get Inkspace to import EPS directly, but you need to get a library called Ghostscript working. Another way is to convert the EPS file to PDF and then import that. On a Mac this can be done by opening the EPS file up in Preview and then saving as a PDF.

Posted on 12 Aug 09 by Helen Emerson (last updated on 31 Mar 13).
Filed under CSS