SVG Optimizer & Path Viewer
Make SVG files smaller: remove editor data, metadata, comments and default values, round numbers, shorten path commands and colours, and compare safe before/after previews with the bytes each pass saved. A path viewer draws any d string with numbered points.
How to Use
- Paste the SVG code, or drop or choose an .svg file. It is read in your browser and never uploaded.
- Leave every pass ticked for the smallest file, or untick any you want to keep (for example comments or editor data you still need). Choose how many decimals to keep — 3 suits most drawings, 1 or 2 suits small icons.
- Compare the before and after previews, which are drawn from a cleaned copy so nothing in the file can run, and read the byte and gzip sizes.
- Read Show Work for each pass and the bytes it saved, then press Copy SVG or Download .svg.
- Switch to Path viewer and paste a path
dstring to see it drawn with numbered points, control lines and a table of every command.
Shortest form
Worked Example
A check-mark icon, 199 bytes. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFFFFF" stroke="#000000" stroke-width="1.000000" d="M 6.7500000,12.250000 L 10.250000,15.750000 L 17.250000,8.7500000"/></svg>
Default values: stroke-width="1.000000" is the default width of 1, and nothing above it sets another, so it goes: −24 bytes. Rounding to 3 decimals turns 6.7500000 into 6.75 and so on: −31 bytes. Shorter path commands: from (6.75, 12.25) the next point is 3.5 right and 3.5 down, so l3.5 3.5 is shorter than L10.25 15.75, the second l is implied, and -7 needs no space before it: −11 bytes. Colours: #FFFFFF → #fff and #000000 → #000: −6 bytes. The 65-character path is now M6.75 12.25l3.5 3.5 7-7 (23 characters) and the file is 127 bytes, 72 bytes (36.2%) smaller, with the viewBox untouched.
The common mistake: rounding each relative number on its own. A path of 1,000 steps of l0.1234 0.1234 ends at (123.4, 123.4). Round every offset to 1 decimal and each becomes l0.1, so the path ends at (100, 100) — 23.4 units short, because 1,000 errors of 0.0234 add up. This tool rounds absolute positions and works the relative offsets out again from the rounded points, so the same path at 1 decimal still ends at (123.4, 123.4). The other classic mistake is deleting the viewBox to save a few bytes: without it the drawing can no longer be scaled with CSS.
Show Work
Path Commands and Rules
SVG and Why It Carries So Much Extra
SVG 1.0 became a W3C Recommendation in September 2001 and SVG 1.1 in January 2003. Its path syntax was designed to be compact from the start: the specification lets commands repeat without their letter and lets separators be dropped wherever the numbers stay unambiguous, which is why M0 0C.5.5 1.5.5 2 0 is a valid path. SVG 2 reached Candidate Recommendation in 2018 and is what browsers broadly follow today.
Drawing programs write far more than the picture needs, because the file is also their working document: Inkscape keeps its window and layer state in sodipodi: and inkscape: attributes, Illustrator adds a DOCTYPE with entities, comments and its own namespaces, and both write coordinates to six or more decimals. Inkscape’s own “Optimized SVG” save option uses the Scour library, and SVGO, a Node.js optimiser first released in 2012, made the same clean-up a standard build step for web icons.
About This Tool
This optimiser reads the SVG with its own XML parser, runs a fixed series of passes, and writes the file out again after each one so Show Work can give the exact bytes each pass saved. Path data is converted to absolute coordinates, rounded, and then written with whichever of the absolute or relative form is shorter for every segment, so rounding never drifts. The path viewer uses the same parser to draw any d string with numbered end points, dashed control lines and a table of commands.
Your SVG is never uploaded and never put into this page as live markup: both previews are drawn from a copy with scripts, event handlers, outside references and the DOCTYPE removed, and are shown as images, in which browsers do not run scripts. The site’s image converter has its own SVG tracer for turning pictures into vectors; this tool only cleans SVG that already exists.
Related tools: Data URI Encoder, HTML, CSS & JS Minifier, Beautifier & Linter, and Favicon Generator.
Frequently Asked Questions
What does the optimiser remove, and can it break my drawing?
It removes the XML declaration and DOCTYPE, comments, Inkscape, Illustrator and Sketch editor data and metadata, scripts and event handlers, hidden or zero-size elements, empty attributes, attribute-less groups and default values such as stroke-width="1", then rounds numbers and shortens paths and colours. It is conservative: the viewBox is never touched, elements whose id is referenced (by url(#…), href or a style rule) are kept, groups are left alone when a <style> block could select them, and inherited defaults are only removed when no parent, <use> or stylesheet could change them.
How many decimals should I keep?
Enough that the rounding is smaller than a screen pixel at the largest size you show the drawing. A 24-unit icon shown at 24 px has 1 px per unit, so 2 decimals is a hundredth of a pixel; 3 decimals stays invisible even at 10 times that size. Rounding here is done on absolute positions, so errors never add up: 1,000 steps of l0.1234 rounded one by one to 1 decimal would end at 100 instead of 123.4, but this tool ends at 123.4.
Why are relative path commands shorter?
An uppercase command uses absolute coordinates; a lowercase one gives offsets from the current point, which are usually smaller numbers. M100 100 L103 104 L106 108 becomes M100 100l3 4 3 4: the offsets are one digit each, and the second l is dropped because a command letter can repeat implicitly. The tool tries both forms for every segment and keeps whichever is shorter, and turns a horizontal or vertical L into H or V.
Is it safe to preview an SVG from somewhere else?
Here, yes. An SVG file can contain JavaScript, so the previews are made from a cleaned copy (no <script>, no on… handlers, no javascript: links, no outside files) and shown only as an image, and browsers never run scripts or fetch anything inside an SVG that is displayed as an image. The file is never added to this page as live markup. The Scripts and event handlers pass also removes them from the optimised file.
What do the path commands M, L, C, Q, A and Z mean?
M moves the pen, L draws a straight line, H and V draw horizontal and vertical lines, C draws a cubic Bézier curve with two control points and S a smooth one that mirrors the previous control point, Q and T are the quadratic versions with one control point, A draws an elliptical arc (radius x, radius y, rotation, large-arc flag, sweep flag, end x, end y), and Z closes the shape back to its start. The path viewer lists each one with its end point.
How do I use the SVG Optimizer & Path Viewer?
Just type your numbers. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Is it free? Does it work without internet?
Yes to both. It is free with no sign-up, and once the page has loaded it keeps working even with no internet.
Where does my data go?
Nowhere — every calculation runs on your own device. Nothing you enter is uploaded, logged, or stored.
Common Use Cases
Cleaning an Inkscape export
The Inkscape preset drops from 1,534 to 336 bytes (78.1%) once the namedview, metadata, inkscape: and sodipodi: attributes and seven-decimal numbers are gone.
Cleaning an Illustrator export
The Illustrator preset goes from 813 to 286 bytes: the DOCTYPE entities are written out, the hidden layer removed and #FF0000 becomes red.
Icons for a sprite or inline SVG
A 199-byte check icon becomes 127 bytes, small enough to inline in HTML or a CSS data URI.
Debugging a path
Paste a d string to see where each numbered point lands and which commands are relative — handy when a hand-edited icon has a stray segment.
Checking an SVG before use
Load an SVG from a third party and see the script and handler count in Show Work before it goes anywhere near your site.
Last updated: