hidekazu-konishi.com

SVG Optimizer Tool - Free Online SVG Cleaner and Minifier

First Published: 2026-04-28
Last Updated: 2026-04-28

An online SVG optimizer that removes editor metadata, comments, default attributes, and unnecessary precision to reduce file size. All processing runs locally in your browser; no data leaves your device.

Features

• ✨ SVGO-style optimization: Apply a curated subset of SVGO-equivalent transforms entirely in your browser, with no external dependencies.
• 🗝️ Comment & metadata removal: Strip <!-- … --> comments and the <title>, <desc>, <metadata>, and <sodipodi:namedview> elements that bloat exported files.
• 📐 Configurable numeric precision: Round path coordinates, polyline points, transform matrices, and standard numeric attributes to 1–6 decimal places, while preserving SVG arc flag arguments (large-arc-flag and sweep-flag) intact.
• 🗒️ Editor namespace cleanup: Remove Inkscape (inkscape:*) and Sodipodi (sodipodi:*) attributes, elements, and namespace declarations that have no rendering effect outside the editor.
• 🔎 Reference-aware id / class pruning: Keep id and class only when they are actually referenced via url(#id), href="#id", xlink:href="#id", or <style> selectors, so referenced gradients, patterns, filters, and clip-paths still work.
• 🧹 Default-attribute trimming: Remove explicit attributes that already match the W3C SVG 1.1 default value (e.g. fill-opacity="1", stroke-linejoin="miter").
• ✂️ Useless group collapse: Lift the children of <g> elements that have no rendering attributes left, while leaving groups inside <defs> untouched.
• 📊 Live size comparison: See the original size, optimized size, and percentage reduction for every run.
• 👁️ Built-in preview: Render the optimized SVG on a checkerboard backdrop so transparent regions and anti-aliasing are clearly visible.
• 📁 Drag-and-drop file input: Drop an .svg file (up to 5 MB) onto the input area, or paste the code directly.
• 🔒 Privacy first: All processing runs locally in your browser using DOMParser and XMLSerializer; no SVG content is ever transmitted to a server.
• 🛡️ Safety: Embedded <script> elements and inline on* event handlers are always removed before optimization or preview, regardless of the options.
• ⌨️ Keyboard shortcut: Press Ctrl+Enter (⌘+Enter on Mac) inside the input area to optimize instantly.

How to Use

1. Provide SVG input: Paste SVG markup into the input box, drop an .svg file onto the drop zone, or click one of the three sample buttons to load an Inkscape, Adobe Illustrator, or hand-written sample.
2. Choose optimization options: Toggle each of the eight checkboxes to control which passes run. Use the Decimal places slider to set the rounding precision (1–6, default 3) when Round numeric precision is enabled.
3. Optimize: Click Optimize. The optimized SVG appears in the right-hand textarea, the preview renders on the checkerboard backdrop, and the stats row shows the size delta.
4. Iterate: Toggle any option or edit the input; the output re-runs automatically (debounced) so the displayed result stays in sync with the controls.
5. Export: Click Copy to copy the optimized SVG to your clipboard, or Download to save it as optimized.svg.
6. Reset: Click Clear to empty the input, output, preview, stats, and messages.

Important Notes

• Pure client-side: The tool uses only the browser’s built-in DOMParser and XMLSerializer; nothing is uploaded. The page works offline once it has loaded.
• Security strip is always on: <script> elements and any attribute whose name begins with on (such as onclick, onload, onerror) are removed before serialization or preview, even if you turn every other option off.
• Conservative id / class cleanup: An id is removed only when no url(#id), href="#id", xlink:href="#id", or <style> selector references it. Class tokens are kept when referenced by a .class selector inside <style>. Run with this option off if your SVG is consumed by external CSS or JavaScript that selects by id or class.
• Default-attribute removal is literal: A value is removed only when it exactly matches the W3C SVG 1.1 spec default (e.g. fill-opacity="1"). Equivalent values such as fill="#000000" for the default fill="black" are not normalized; this avoids accidental colour drift.
• Whitespace handling: Only inter-tag whitespace is collapsed (> ··· <). Whitespace inside text content—including <text xml:space="preserve">—is preserved.
• Arc flags are preserved: In A / a path commands, the large-arc-flag and sweep-flag arguments are kept as 0 or 1 regardless of the precision slider.
• Group collapse skips <defs>: A <g> inside <defs> is never lifted, since it may be referenced by <use>.
• Out of scope: Path geometric simplification (point-list reduction in c / a segments), raster image re-encoding, and inlining of external image references are intentionally not implemented.
• Size limit: Inputs larger than 5 MB are rejected before parsing to keep the browser responsive.
• Browser requirements: A modern browser with DOMParser, XMLSerializer, FileReader, and (optionally) the asynchronous Clipboard API is required. The tool falls back to document.execCommand('copy') on older browsers.
• Reference: Default attribute values follow the W3C SVG 1.1 painting specification; path command syntax follows the SVG 1.1 path data BNF. The optimization passes are inspired by the SVGO project.