See also:
Quaject
Articles
Topics
How-tos
Stylized link icon

Generating data URLs in JavaScript

Anton Vasetenkov
Web, data, bio, language.
data URI scheme
JavaScript

All data URLs begin with data:, followed by the optional media type, encoding, and the data itself.

Below are examples of data URLs (data URIs) and how to generate them.

text/plain data, UTF-8 encoding

const data = 'Hello World!'
console.log(`data:text/plain;utf8,${encodeURIComponent(data)}`)

text/plain data, base64 encoding

const data = 'Hello World!'
console.log(`data:text/plain;base64,${btoa(data)}`) // Browser
console.log(`data:text/plain;base64,${Buffer.from(data).toString('base64')}`) // Node.js

text/html data, base64 encoding

const data = '<b>Hello World!</b>'
console.log(`data:text/html;base64,${btoa(data)}`) // Browser
console.log(`data:text/html;base64,${Buffer.from(data).toString('base64')}`) // Node.js

image/svg+xml data, base64 encoding

const data = 
    `<?xml version="1.0"?>
    <svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
        <circle cx="50" cy="50" r="20" fill="yellow" />
    </svg>`
console.log(`data:image/svg+xml;base64,${btoa(data)}`) // Browser
console.log(`data:image/svg+xml;base64,${Buffer.from(data).toString('base64')}`) // Node.js
See also