CSS, SVG and base64

My selfie

James Turner,

Tags: Animation CSS SVG

Update 01/08/2016: In the post below, I talked about including SVG images in CSS using base64. I recently came across this post from 2014 which argues why base64 might not be the best idea: Probably Don’t Base64 SVG. Chris Coyier says (and I've tried this) that you can prefix SVG code like so: <img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>. Much easier!

Having spent quite a lot of time over the last few years reading articles and listening to podcasts on web design (yep, I'm sad like that), I've noticed that experts in the web industry who write and speak often develop a brand that is strongly linked to their appearance. Think Zeldman's beanie hat, Nabors' star-shaped earrings, or Clarke's quiff. Adding a profile image to an article, therefore, is a great way to visually connect an article summary or heading with its author and content.

The way that the 24 Ways homepage does this is pretty clever. It uses animation to ‘fold’ the corner of an article summary and reveal the author's profile pic (Figure 1). This doesn't just tell us who's writing, though, as it also helps the user to identify which article is currently under the mouse arrow. This is quite important since the whole summary acts as a link to the article. It might otherwise be easy for a mouse user to click accidentally on the wrong article.

The article summary without mouseover and with.
Figure 1: On the left, the author's profile image is hidden, but if the mouse hovers over the summary (right), the author's photo is partly revealed.

In this post and the next, I'm interested in how this effect is achieved. First, I want to focus on a weird way in which SVG can be included in CSS, for example, as a background image.

Skip to navigation

Good ol’ cel animation

If we look at the image that 24 Ways uses to simulate a folding corner (Figure 2), it's pretty clear how this effect works:

A series of triangles which simulate the corner of a page being folded.
Figure 2: The folding corner is based on frame-by-frame cel anim­ation.

I was expecting this to have been implemented programmatically, using mind-warping trigonometry. But this looks more like old-fashioned cel animation. I'll be returning to this in a future post.

Skip to navigation

Robot overlords

Now, here's what the CSS for the background image looks like:

.summary-article .summary_author::after {
  M3oiIGZpbGw9IiNjMDMiLz48L3N2Zz4=') -0.5em 0 no-repeat;
  background-size:55em 4.5em;

Yikes! Have our robot overlords finally risen from their aeons-long slumber? Actually, it's not as bad as it looks. As CSS Tricks explains in Using SVG (March 2013), everything from PHN… to …Zz4= is XML code that has been converted to base64. Mobilefish.com has an XML to base64 converter. You paste in your XML, click ‘Go’, and copy the result into your CSS, using the data:image/svg+xml;base64, preamble. When converted to XML, the above code looks a bit more like the triangles it describes:

<svg width="880" height="72" xmlns="http://www.w3.org/2000/svg">
  <path d="M7 0h73v73l-73-73z" fill="#F6F6F6"/>
  <path d="M87 0l65.8 7.2 7.2 65.8-73-73z" fill="#E9E9E9"/>
  <path d="M167 0l57.88 14.4 15.12 58.6-73-73z" fill="#E0E0E0"/>
  <path d="M247 0l50.68 21.6 22.32 51.4-73-73z" fill="#D6D6D6"/>
  <path d="M327 0l44.2 28.8 28.8 44.2-73-73z" fill="#ccc"/>
  <path d="M488-1l28.8 44.2 44.2 28.8-73-73z" fill="#900"/>
  <path d="M568-1l21.6 51.4 51.4 21.6-73-73z" fill="#A5000B"/>
  <path d="M648-1l14.4 58.6 58.6 14.4-73-73z" fill="#B30019"/>
  <path d="M728-1l7.2 65.8 65.8 7.2-73-73z" fill="#BF0026"/>
  <path d="M808-1v73h73l-73-73z" fill="#c03"/>

There isn't really a saving in terms of file size when you use base64. The main advantage of converting to base64 is that it allows SVG to be injected directly into CSS. This removes the need for a HTTP request to an external .svg file, which might slow down page load. Apart from IE8, support for SVG images as CSS backgrounds is pretty good, with some browsers displaying blurriness on zoom, or having issues with repeating SVG backgrounds.

Skip to navigation


So, in summary, SVG images can be used for lots of exciting background effects. To cut HTTP requests, we can add SVG code that has been converted to base64 directly into CSS. This tutorial (February 2011) has a bunch of examples that show how this can be exploited further.

Next time, I'll look in more depth at how the folding corner is implemented in CSS, including @keyframes animations, SVG sprites, and anything else that crops up.

Skip to navigation