by Jenny Knuth, based on the work of Chris Coyier and Taylor Hunt
A data URI is a nice way to include a web resource without needing to make an HTTP request. Chris Coyier explains the technique nicely in Probably Don't Base64 SVG.
While a PNG might use Base64 encoding, for SVG, there is a better way.
Taylor Hunt's experiments led to this solution for optimizing SVGs in data URIs:
"So the best way of encoding SVG in a data URI is data:image/svg+xml,[actual data]
. We don’t need the ;charset=utf-8
parameter (or the invalid ;utf8
parameter…), because URLs are always ASCII."
Here is a step-by-step method to create your encoded SVG string to include as a data URI:
-
Run your SVG file through svgo to optimize. (Directions are found at the svgo link.)
-
In your text editor, replace all double quotes in your SVG file with single quotes. Make sure there are no line breaks.
-
Replace all non-ASCII and URL-unsafe characters by running your SVG string through an encoding function like the one below by Taylor Hunt—surround your
svgString
with double quotes in the function's argument. -
Paste your encoded SVG into your HTML tag's
src
attribute or CSS'surl
call using double quotes, after thedata:image/sg+xml,
prefix.
Examples:
HTML:
<img src="data:image/svg+xml,%3Csvg width='247' height='34' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFF' fill-rule='non.zero'%3E%3Cpath d='M13.918 ... 4.022-2.888 4.57V26h-4.46V7.975z' fill='%23D7DCE1'/%3E%3C/g%3E%3C/svg%3E"/>
CSS:
.logo {
background: url("data:image/svg+xml,%3Csvg ... /svg%3E");
}
The %3svg
starts your encoded string and the svg%3E
ends your encoded string.
Let me know if any questions.
typo in the svg mime type at step 4.