Emoji.svg

About

This is a template that lets you make an svg out of emoji. You may want to use emoji where image is needed but emoji is not an image — it is text. This template will help you to make image out of emoji.

Guide

The code

<svg viewBox='-9 -14.5 18 18' xmlns='http://www.w3.org/2000/svg'>
  <text text-anchor='middle'>😀</text>
</svg>

The result

The resulting image looks exactly the same as the source emoji because it uses text node with emoji inside. It also means that the image may look different on different systems or even be broken on systems that doesn't support given emoji so be careful with this.

download 😀.svg

Data-url

You can use data-url to use an image without saving it on a file system. Here is the example of using an emoji as web page favicon:

<link
  rel="icon"
  type="image/svg+xml"
  href="data:image/svg+xml,&lt;svg viewBox='-9 -14.5 18 18' xmlns='http://www.w3.org/2000/svg'>&lt;text text-anchor='middle'>😀&lt;/text>&lt;/svg>"
>

The code above may not work properly in some browsers (yet?). I use it for stuff that I make for myself so I am sure that it wouldn't cause any problems. Also this code is used in this exact document as an example.