Editing Data URI scheme (section)

==Examples of use==

===HTML===
An [[HTML]] fragment embedding a '''base64''' encoded '''PNG''' picture of a small red dot: [[File:Red-dot-5px.png]]

<syntaxhighlight lang="html">
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" style="width:36pt;height:36pt" />
</syntaxhighlight>

In this example, the lines are broken for formatting purposes.  In actual URIs,
including data URIs, control characters (ASCII 0 to 31, and 127) and spaces (ASCII 32) are "excluded characters". This means that [[whitespace character]]s are not permitted in data URIs.  However, in the context of HTML 4 and HTML 5, linefeeds within an element attribute value (such as the "src" above) are ignored{{Citation needed|reason=linefeeds are signifcant in the title attribute, so not ignored in HTML attributes|date=August 2017}}. So the data URI above would be processed ignoring the linefeeds, giving the correct result.  But note that this is an HTML feature, not a data URI feature, and in other contexts, it is not possible to rely on whitespace within the URI being ignored.

An [[HTML]] fragment embedding a '''utf8''' encoded '''SVG''' picture of a small red dot: [[File:Red-dot.svg]]

<syntaxhighlight lang="html">
<img alt="Red dot" src="data:image/svg+xml;utf8,
<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'>
 <circle style='fill:red' cx='5' cy='5' r='5'/>
</svg>"/>
</syntaxhighlight>

In this example, the image data is encoded with utf8 and hence the image data can broken into multiple lines for easy reading. Single quote has to be used in the SVG data as double quote is used for encapsulating the image source.

A [[favicon]] can also be made with utf8 encoding and SVG data which has to appear in the 'head' section of the HTML:

<syntaxhighlight lang="html">
<link rel="icon" href='data:image/svg+xml;utf8,
<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg">
 <circle style="fill:red" cx="5" cy="5" r="5"/>
</svg>'/>
</syntaxhighlight>

===CSS===
A [[Cascading Style Sheets|Cascading Style Sheets (CSS)]] rule that includes a background image:
<syntaxhighlight lang="css">
ul.checklist li.complete {
    padding-left: 20px;
    background: white url('data:image/png;base64,iVB\
ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU\
AAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\
yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\
FTkSuQmCC') no-repeat scroll left top;
}
</syntaxhighlight>

In this example, the <code>\ + <linefeed></code> line terminators
are a feature of CSS, indicating continuation on the next line.  These would be removed by the CSS stylesheet processor, and the data URI would be reconstituted without whitespace, making it correct, since whitespace is not allowed within the data component of a data:
URI.

===JavaScript===
A [[JavaScript]] statement that opens an embedded subwindow, as for a footnote link:

<syntaxhighlight lang="javascript">
window.open('data:text/html;charset=utf-8,' +
    encodeURIComponent( // Escape for URL formatting
        '<!DOCTYPE html>'+
        '<html lang="en">'+
        '<head><title>Embedded Window</title></head>'+
        '<body><h1>42</h1></body>'+
        '</html>'
    )
);
</syntaxhighlight>

===SVG===
[[File:35_mm_angle_of_view_vs_focal_length.svg|thumb|link={{filepath:35_mm_angle_of_view_vs_focal_length.svg}}|Example of an SVG image with embedded JPEG images]]
A [[Scalable Vector Graphic]] image containing an embedded JPEG image encoded in Base64:

<syntaxhighlight lang="xml">
<svg>
<image width="64" height="24" href="data:image/jpeg;base64,
/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHzIsKSw4NTI7S31RS0VFS5ltc1p9tZ++u7Kf
r6zI4f/zyNT/16yv+v/9////////wfD/////////////2wBDATU4OEtCS5NRUZP/zq/O////////
////////////////////////////////////////////////////////////wAARCAAYAEADAREA
AhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAAQIR
AAMSITEEEyJBgTORUWFx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAA
AAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4
MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4UyRHvjrAkC9KhpLMClQntlqFc2
X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1eAzU/HX80YBYy
JLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k="/>
</svg>
</syntaxhighlight>