Data URI scheme: Difference between revisions

Revision as of 11:53, 8 November 2023

Revision as of 20:56, 23 November 2023

Line 27:

===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="Red dot" src="data:image/png;base64,iVBORw0KGgoAAA

ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4

//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU

5ErkJggg==" alt="Red dot" />

</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'>

<ellipse style='fill:red; stroke:none' cx='5' cy='5' rx='5' ry='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">

<ellipse style="fill:red; stroke:none" cx="5" cy="5" rx="5" ry="5"/>

</svg>'/>

</syntaxhighlight>

===CSS===