Images & SVG
SVG Optimizer
Paste SVG markup to strip editor metadata, comments and redundant attributes and to tighten coordinates & colors. A live preview and byte savings update as you type, and nothing is uploaded — your SVG never leaves the page.
Optimizations
liveSVG input
paste or type
Parsed with a built-in SVG/XML parser. Tags, attribute case and
<text>, <style> and
<script> content are preserved exactly.
Optimized result
preview & codeThe rendered SVG appears here.
How it works
The input is parsed in this tab, then rebuilt with the selected optimizations.
Remove editor metadata drops <metadata>,
Inkscape/Sketch namespaces and similar export cruft while keeping
<title> and <desc> for accessibility.
Shorten colors rewrites #ffffff as
#fff and rgb() or named colors to their shortest form.
Drop default attributes removes presentation values that match
the SVG defaults, and it respects inherited values so an intentional reset on a
child is never lost. Remove unreferenced IDs is off by default and
is skipped entirely when the file contains a <style> block.
The preview renders inside an <img> data URI, so scripts in a
pasted SVG stay inert. Nothing is uploaded and no network request is made.
Practical uses
Parse SVG markup and rebuild it with editor metadata, comments, default attributes and redundant precision removed, reporting byte savings and a live preview.
Common ways to use it
- Strip editor metadata and namespaces from a design-tool export.
- Round path coordinates and shorten colours to reduce file size.
- Check for malformed markup with a line and column before shipping an SVG.
- Drop empty groups and pointless single-child wrappers.
Clean a small design-tool export with default options
Input
<svg xmlns="http://www.w3.org/2000/svg" width="24.000" height="24.000" version="1.1"><!-- note --><metadata>x</metadata><rect x="0.500" y="0.000" width="10.000" height="10.000" fill="#FFFFFF" stroke="none" stroke-width="1"/></svg>
Output
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect x=".5" y="0" width="10" height="10" fill="#fff"/></svg>
Verified with the tool's analyze function and default (Safe) options: 230 input bytes became 124 output bytes, 46% smaller, by removing 1 comment, 1 metadata item and 3 default attributes and rounding coordinates.
Options that matter
- Preset — Safe (precision 2, keep IDs) or Aggressive (precision 1, remove unreferenced IDs).
- Coordinate precision — 0 to 4 decimal places; 0 rounds coordinates to whole numbers.
- Remove editor metadata and namespaces — drops metadata and editor attributes while keeping title and desc.
- Remove comments and XML declaration.
- Remove empty and pointless groups.
- Shorten colors — rewrites #ffffff as #fff and chooses the shortest of hex, short hex, or a colour name.
- Drop default attributes — removes presentation values equal to the SVG defaults unless an ancestor set them.
- Remove unreferenced IDs — off by default and skipped when the file contains a style element.
Things to keep in mind
- Remove unreferenced IDs is skipped entirely when the file contains a style element, because CSS selectors may reference IDs the scan cannot see.
- The parser is a built-in SVG/XML tokeniser, not a full browser HTML parser; malformed input reports a line and column and may still show a best-effort result.
- Text, style, script, title and desc content is copied byte-for-byte; only element markup is rewritten.
- Rounding coordinates to fewer decimals can change very precise paths, and dropping default attributes follows inherited values but is still an approximation of presentation semantics.
- The preview renders the optimized SVG inside an img data URI, so scripts in the input stay inert.