What does this tool do?
This tool converts SVGs into Data URLs — a form compatible for use in CSS and HTML ![]()
ie 9.
Uses
The output can be used in the following CSS properties:
background-imagelist-style-imagecontentborder-image-sourceoffset-pathmask-image
It can also be used as the source for html images:
<img src="data:…"><source srcset="data:…">
Optimizations
This tool also performs some optimisations specific to encoded SVGs.
note - it doesn't perform any other minification or optimisations. You should optimise your svg using a tool like svgomg before you encode it.
Converts double quotes wrapping attribute values to single quotes
So attribute="value" becomes attribute='value' — url encoding doesn't allow for double quotes — which then need to be escaped — resulting in a larger size.
This saves four bytes per attribute — as in percent encoding they'd need to be written as attribute=%22value%22.
Percent-encodes only necessary characters
Officially, lots of characters are not allowed in Data URLs — but practically this isn't the case for encoding SVGs in Data URLs.
Complete information on allowed and disallowed characters can be found by reading the long and boring RFC 3986. One of the options above has a fully spec compliant output in case this is necessary.
But for most use cases, you can save a lot of data, by just percent-encoding the following characters:
Swaps some hex colors to their CSS named equivalents.
When percent-encoding an SVG the # symbol that precedes hex colors gets converted to %23 making some colors longer than their named equivalents.
So #fff becomes %23fff and would be better off written as white.
This idea and some of the code has been copied from mini-svg-data-uri.
It's under an MIT license. I'm supposed to paste the whole license on this page — but in the spirit of the software itself — I'll save data by just saying — Thank you, Taylor Hunt!
Lowercases percent encoded hex pairs
Percent-encoded hex pairs are not case sensitive — %2A can be written as %2a. This helps with text compression as lowercase letters are more common that uppercase letters. It saves a few bytes.
Removes useless whitespace.
While slightly outside the scope of the tool — as this would also be done by svgomg — it just makes using the tool a lot more practical.
Removes deprecated xmlns:xlink attribute
The attribute xmlns:xlink='http://www.w3.org/1999/xlink' was required for SVGs using xlink attributes. xlink attributes are no longer supported, but this link often finds itself at the beginning of SVGs. This tool removes it.
Removes useless version attribute
The attribute version='1.1' is recommended for all xml — but in practice is not required. This tool removes it if it is present.
Adds necessary xmlns attribute if missing.
SVGs inlined in HTML don't need the xmlns='http://www.w3.org/2000/svg' — but in a data URL they do.
This tool adds it if it is missing.