What does this tool do?
This tool converts SVGs into Data URLs — a form compatible for use in CSS and HTML
elements. The output is both minimal in size and backwards compatible with to
The output can be used in the following CSS properties:
It can also be used as the source for html images:
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
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
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.
%23fff and would be better off written as
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.
xmlns:xlink='http://www.w3.org/1999/xlink' was required for SVGs using
xlink attributes are no longer supported, but this link often finds itself at the beginning of SVGs. This tool removes it.
version='1.1' is recommended for all
xml — but in practice is not required. This tool removes it if it is present.
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.