Using emojis as images


In the post linked to above I wrote about the pict URL scheme introduced for mobile devices in the WAP/i-mode era. It could provide a way to use emojis from the local system as images anywhere in HTML, CSS and SVG. Is this something authors and browser vendors would be interested in?

I recently edited an SVG file that grow into megabytes because it embedded several country flags. (Those that include their coat of arms or some stylized text can become insanely large compared to simple tricolores.) If I could have used the respective emojis as if they were graphics and not text, the file would have been less than 100 KB.


I don’t see what benefit this brings considering that you could just use the glyph itself and font-size for sizing.


You cannot use text for background-image in CSS, for instance.


Put the emoji in an SVG using <text>. It’ll work as any other image would including background images plus it works now with a 97% adoption according to Can I Use.

Emoji are just text after all and trying to bake in special status for them which can’t generalise to any other text feels like a non starter. There’s other potentially interesting options. This post from Google Developers discusses some proprietary options such as -moz-element() and -webkit-canvas() which would allow things like this.

While there were issues the thinking hasn’t gone away, the (Blink intent to deprecate)[!searchin/blink-dev/webkit-canvas/blink-dev/WvqvdsmiQzg/a6nAs5L_RXkJ] mentions that CSS Houdini is aiming to improve on it using Custom Paint, which should cover many other use cases.


What if there was a standardized way to make an icon set?