Converting any file into a data: URI

2023-09-09

frontend
datauri
gist

data: URIs are super-useful to embed images – such as PNG or SVGs – into:

CSS;
HTML; or
SVG.

So how do you create a data: URI?

This simple script does the trick:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
#!/bin/sh

if [ $# -ne 1 ]; then
    echo "Usage: $0 FILENAME"
    exit 1
fi

mimetype=$(file -bN --mime-type "$1")
content=$(base64 -w0 < "$1")
echo "url('data:$mimetype;base64,$content')"

Hosted with ❤️ by this very website for the sake of privacy. view raw