411 REFERENCE · Wikibooks
Cascading Style Sheets/Data URIs
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
Use a SVG file to load external data URIs as a background-image in CSS.
.alpha { background-image:url(beta.svg) }
<?xml version="1.0" ?>
<!--beta.svg-->
<!--SVG Wrapper Element-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--Data URI Image Element-->
<image x="0" y="0" width="16" height="16" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC" />
</svg>
Use meta or script tags to redirect a request to a data URI:
<html>
<!--Using meta redirect-->
<meta http-equiv="Refresh" content="0; url= data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC">
<!--Using script redirect-->
<script>
window.location="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC";
</script>
</html>
Use a data URI to place text in the cursor position:
html,body { cursor: url(data:,Hi),text;