Data URIs

The data: URI scheme is an underappreciated trick for virtual files.

A while back, I unintentionally amazed meeting attendees when spawning an ad-hoc notepad by entering data:text/html,<textarea> into my browser’s address bar.

I first learned about this trick from SVG folks (e.g. to embed icons within a style sheet):

data:image/svg+xml;charset=utf-8,<svg xmlns=""><rect x="0" y="0" width="100%" height="100%" /></svg>

Note that the SVG string needs to be URL-encoded there; e.g. using %23 instead of # for hex colors.

Binary data can be inserted via Base64 encoding – for which I’d created a little Python script:

#!/usr/bin/env python3

  $ ./b64encode "image/png" "/path/to/image.png"

import sys

from base64 import b64encode

def main(_, mime_type, filepath):
    with open(filepath, "rb") as fh:
        data =
    print("data:%s;base64,%s" % (mime_type, b64encode(data).decode("utf-8")))
    return True

if __name__ == "__main__":
    status = not main(*sys.argv)

Chris Coyier’s article on the subject provides more context and details worth considering.