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
dataconst data = 'Hello World!'
console.log(`data:text/plain;charset=utf-8,${encodeURIComponent(data)}`)
text/plain
data, base64 encodingconst 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 encodingconst 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 encodingconst 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