Emoji One SVG Sprites

🍒 :) :coffee: :( :fire: 🍔

We've setup an SVG Sprite for people to use. These sprites are vector based and resizeable infinitely, though please note that they do require a bit of setup…

Some Considerations

These are not supported in IE8.
Cross domain SVG sprites are blocked, sprites have to be hosted on the same domain as the requesting page (and thus are not available via our CDN)

1. Add IE Fix:

IE does not support SVG sprites, to get it working you'll need to include SVG4Everybody and attach the following meta tag in your <head>:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="svg4everybody.min.js"></script>

2. Enable SVG Sprite mode and set the relative path

Once that's done, it's just a matter of enabling SVG Sprites in your Emoji One configuration

Note: SVG sprites require a third configuration variable: emojione.imagePathSVGSprites. This is in contrast to the PNG sprites, which set the path within the sprite CSS file. Thankfully with SVG Sprites we don't need to include additional CSS, so it needs to be set as a variable in the script.

Javascript Example

emojione.imageType = 'svg';
emojione.sprites = true;
emojione.imagePathSVGSprites = './../assets/sprites/emojione.sprites.svg';

PHP Example

Emojione::$imageType = 'svg';
Emojione::$sprites = true;
Emojione::$imagePathSVGSprites = './../assets/sprites/emojione.sprites.svg';

If you are not using our conversion scripts, SVG sprites can be implemented using the following markup structure. In this example we're using the unicode symbol 1F433 aka . The <description> tag works similarly to alt text, enabling copy pasting of the emoji unicode characters.

<svg class="emojione">
    <description>&#x1f433;</description>
    <use xlink:href="path/to/emojione.sprites.svg#emoji-1F433"></use>
</svg>