Using SVGs as background images

If you create your own icons for your site you should already be using SVGs because of the obvious scalability benefits of the vector format. However many choose to convert these to a font using tools such as iconmoon or to use icon libraries like Font Awesome because it makes it easier to add and control icons with CSS. Using SVGs as background images tips the balance back to keeping your icons in-house.

I like to make my icons with Illustrator because it offers me complete control over the icon, including using multiple colours or gradients if desired, and then save a copy as a SVG. It should be a small file but we can optimise it further using the fantastic side project tool by Jake Archibald he called SVGOMG (SVG Oh My God!).

Armed with this optimised SVG, we could then convert it to a Base64 image using data-URI so we can display it as a background image, but that method has many downsides, not least adding unnecessary bloat. Instead of this, head to this drag-and-drop SVG encoding tool by Mike Foskett and copy the CSS code. The output code when we dropped a 48px square RSS feed icon in to it looks like this:

.rss {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='%23FFA547'%3E%3Ccircle cx='8' cy='38' r='6'/%3E%3Cpath d='M44 44h-8c0-18.75-15.25-34-34-34V2c23.16 0 42 18.84 42 42z'/%3E%3Cpath d='M30 44h-8c0-11.03-8.97-20-20-20v-8c15.44 0 28 12.56 28 28z'/%3E%3C/g%3E%3C/svg%3E");
}