Replacing broken avatar images with background SVG Emoji

When someone on Twitter mentions my blog, the WordPress WebMentions plugin automatically fetches those Tweets and turns them into comments on the blog post. It looks something like this:

That is pretty cool - but has one slight problem. If someone changes their Twitter avatar, or deletes their account, the image disappears and I'm left with a broken image.

Booo!

So, how do we fix this? With the awesome power of SVG and Emoji!

As pointed out by Lea Verou, SVGs can contain Emoji. Which makes them easy to use for favicons:

Lea Verou

@LeaVerou

Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg:

<svg xmlns="w3.org/2000/svg" viewBox="0 0 100 100">
<text y=".9em" font-size="90">💩</text>
</svg>

Useful for quick apps when you can't be bothered to design a favicon! pic.x.com/s2f8iqxazu

---

This can also be used with CSS's background property:

 CSS.avatar {

  background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.85em%22 font-size=%22100%22>🗣</text></svg>");

}

That's just a URl encoded version of:

 SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

  <text y=".85em" font-size="100">🗣</text>

</svg>"

The background image shows up before the contents of the <img> element have loaded. If the src is missing, your users will see this instead:

Nifty!

You can see it in action here:

There are a few downsides with this approach:

• Transparent images will show the SVG underneath them.
• Not every system renders emoji in the same way.
• Sizing of text within an SVG can be inconsistent.
• A "broken image" icon might display in the foreground.

Enjoy!

Further Reading

• Ire Aderinokun's Styling Broken Images
• Taylor Hunt's Optimizing SVGs in data URIs