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 {
  background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODg
  wIiBoZWlnaHQ9IjcyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9z
  dmciPjxwYXRoIGQ9Ik03IDBoNzN2NzNsLTczLTczeiIgZmlsbD0iI0Y2RjZGN
  iIvPjxwYXRoIGQ9Ik04NyAwbDY1LjggNy4yIDcuMiA2NS44LTczLTczeiIgZm
  lsbD0iI0U5RTlFOSIvPjxwYXRoIGQ9Ik0xNjcgMGw1Ny44OCAxNC40IDE1LjE
  yIDU4LjYtNzMtNzN6IiBmaWxsPSIjRTBFMEUwIi8+PHBhdGggZD0iTTI0NyAw
  bDUwLjY4IDIxLjYgMjIuMzIgNTEuNC03My03M3oiIGZpbGw9IiNENkQ2RDYiL
  z48cGF0aCBkPSJNMzI3IDBsNDQuMiAyOC44IDI4LjggNDQuMi03My03M3oiIG
  ZpbGw9IiNjY2MiLz48cGF0aCBkPSJNNDg4LTFsMjguOCA0NC4yIDQ0LjIgMjg
  uOC03My03M3oiIGZpbGw9IiM5MDAiLz48cGF0aCBkPSJNNTY4LTFsMjEuNiA1
  MS40IDUxLjQgMjEuNi03My03M3oiIGZpbGw9IiNBNTAwMEIiLz48cGF0aCBkP
  SJNNjQ4LTFsMTQuNCA1OC42IDU4LjYgMTQuNC03My03M3oiIGZpbGw9IiNCMz
  AwMTkiLz48cGF0aCBkPSJNNzI4LTFsNy4yIDY1LjggNjUuOCA3LjItNzMtNzN
  6IiBmaWxsPSIjQkYwMDI2Ii8+PHBhdGggZD0iTTgwOC0xdjczaDczbC03My03
  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"/>
</svg>

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

Conclusion

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