Data URIs

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="http://www.w3.org/2000/svg"><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

"""
Usage:
  $ ./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 = fh.read()
    print("data:%s;base64,%s" % (mime_type, b64encode(data).decode("utf-8")))
    return True


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

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