SVG Optimizer: Smaller Files Without Changing the Drawing
An SVG exported from a design tool is usually two to five times larger than it needs to be. The extra weight is editor metadata, coordinates carried to six decimal places, attributes set to values that were already the default, and layer groups that contain nothing. None of it affects what you see. This optimiser parses the file as XML, removes what is safe, lets you decide about what is not, and renders both versions side by side so you can confirm the drawing is unchanged before downloading. Everything runs in your browser and nothing is uploaded.
Table of Contents
Why Exported SVGs Are So Large
Editors save their own state in your file. Inkscape stores document settings and layer labels, Illustrator writes several private namespaces, and Figma leaves ids and groups from its layer tree. All of it is inert once the file leaves the editor.
Coordinates are exported at working precision. A path point written as 12.000000001 takes eleven characters to say twelve. Across a few hundred points that is most of the file.
Defaults get written out explicitly. Attributes such as fill-opacity of one or stroke-linecap of butt are already the specification default, so stating them costs bytes and changes nothing.
Layer structure survives as empty groups. Hidden layers, guides and grouping used only while drawing arrive as elements with no visual content at all.
How to Use This Optimiser
Drop the file or paste the markup. The result appears immediately and updates as you change any setting, so there is no run button to press.
Compare the two previews. They are rendered from the actual markup rather than from an image of it, so if a shape shifts or a gradient disappears you will see it before you download rather than after you deploy.
Work down the switches. Metadata removal is on by default because it is always safe. The rest carry a trade off, and the note under each one says what it is.
Copy for inline use, download for a file. Icons pasted into a component are usually copied, while anything referenced by a URL is better downloaded and served as a file.
Precision and Where the Bytes Go
Two decimal places suits nearly every icon. At the sizes icons are displayed, a hundredth of a unit is far below one screen pixel, so the difference is invisible while the saving is substantial.
Lower precision helps small, simple shapes. A twenty four unit icon of straight lines can often go to zero decimal places without any visible change, which shortens every coordinate in the file.
Detailed artwork needs more. Illustrations with curves, or anything that will be displayed very large, can show faceting on curves if precision is cut too far. Watch the preview as you move the slider.
Path data is compacted as well as rounded. Separators the grammar does not require are dropped, so a leading zero disappears and a minus sign acts as its own separator. The numbers are unchanged.
What Is Always Safe to Remove
Comments and editor namespaces. Nothing in a browser reads them, and removing them cannot change a single pixel of the rendering.
Metadata elements. The metadata element holds licensing and authorship information for tools, not for renderers. Keep a copy of the original if that information matters to you.
Attributes already at their default. Removing an attribute whose value equals the specification default leaves the computed style identical.
Empty groups. A group with no children and no text draws nothing whether it is present or not.
What Needs a Decision From You
ids are sometimes referenced. Gradients, clip paths and filters are applied by id, and your CSS or JavaScript may target them too. This tool leaves the root element alone, but check any SVG you animate before turning the switch on.
Removing width and height changes layout. With only a viewBox the image stretches to fill its container, which is what you want inside a sized wrapper and a problem everywhere else.
title and desc are for people. They are what a screen reader announces. Remove them for purely decorative shapes and keep them for anything conveying meaning.
Whitespace matters inside text. Collapsing it is always safe for shapes, but an SVG containing text elements can space differently. This is uncommon in icons and worth checking in illustrations.
Accessibility and Titles
Decorative icons should be hidden. An icon beside a text label adds nothing for a screen reader user, so mark it aria-hidden rather than giving it a title that gets read twice.
Meaningful icons need a name. An icon that is the only content of a button needs a title element or an accessible label on the button, or the control is announced as nothing at all.
Optimisation should not cost accessibility. The few bytes saved by stripping a title are never worth an unusable control, which is why that switch is off by default here.
Inline SVG Against a File
Inline markup can be styled by CSS. Fill and stroke can be changed from a stylesheet, including on hover and in a dark theme, which is impossible once the SVG is behind an image tag or a background URL.
A file is cached on its own. An icon used on every page is downloaded once as a file, while inline markup travels with every document that contains it.
Inline SVG is markup with a cost. Each element becomes a real node in the page, so a complex illustration inlined into a list of items adds up quickly.
A sensible split. Inline the handful of icons that need to change colour, serve everything else as files, and optimise both the same way.
Serving SVG Properly
Compression matters more than minification. SVG is text, so gzip or brotli typically halves it again. Optimising first makes that compression more effective rather than replacing it.
Send the right content type. A server that labels SVG as plain text will show the markup instead of the picture. It should be image/svg+xml.
Treat uploaded SVG as untrusted. The format can carry script, so an SVG from a user should be sanitised or served from a separate origin rather than inlined into your page.
Common Mistakes to Avoid
Optimising without looking. Aggressive settings on a gradient heavy file can silently break a reference. That is exactly why the preview sits above the download button.
Stripping ids from an animated SVG. If JavaScript or CSS targets an element by id, removing it breaks the animation without any error appearing.
Chasing precision to zero everywhere. It works beautifully for simple icons and visibly flattens curves in detailed artwork. The right value depends on the drawing.
Keeping no original. Optimisation is one way. Keep the editor file, since reconstructing layers from a minified path is not realistic.
Frequently Asked Questions
Keep your original: optimisation is one way. Layer names, editor state and full precision cannot be recovered from the output, so keep the file your design tool produced.