EckherInsightsContact
Eckher
Your guide to what's next.
Eckher
Home › Eckher Insights › Generating data URLs in JavaScript
Sep 26, 2021

Generating data URLs in JavaScript

How to generate data URLs in JavaScript?

All data URLs (also known as data URIs) begin with data:, followed by the media type string (which can be omitted) and the data itself.

Below are some examples of data URLs and ways to generate them.

text/plain data

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

text/plain data, base64 encoding

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

text/html data, base64 encoding

const data = '<b>Hello World!</b>'
console.log(`data:text/html;charset=utf-8;base64,${btoa(unescape(encodeURIComponent(data)))}`) // Browser
console.log(`data:text/html;charset=utf-8;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;charset=utf-8;base64,${btoa(unescape(encodeURIComponent(data)))}`) // Browser
console.log(`data:image/svg+xml;charset=utf-8;base64,${Buffer.from(data).toString('base64')}`) // Node.js
Cover
See also
What are data URLs?
The ins and outs of data URLs.
Using language codes
Official language codes used on the web.
Parsing XML in JavaScript
How to parse XML in JavaScript?
Eckher
Your guide to what's next.
Copyright © 2021 Eckher. Various trademarks held by their respective owners.