Utilia
Categories ▾
Language: en ▾

SVG Optimizer

Optimize and minify SVG files online with SVGO, in your browser. Choose a preset, compare the result visually and see the size and gzip savings.

Plugins

Removing the viewBox stops the drawing from scaling, and shortening or removing IDs breaks CSS, JavaScript, <use> or anchor links that refer to them. Keep the Safe preset for SVGs used in code, sprites or animations.

How to optimize an SVG

  1. Drop an SVG file on the drop zone or click it to choose one. You can also paste the markup into the SVG code box.
  2. Pick a Preset: Safe, Balanced (the default) or Maximum. The Plugins list below shows exactly which steps each preset turns on.
  3. Adjust if needed: the Decimal precision (0 to 8 digits), Multiple passes, and Pretty print (indented output) if you want readable code. As soon as you change a plugin, the precision or the passes, the preset switches to Custom.
  4. Click Optimize SVG. A dropped file is optimized right away, and once there is a result, every settings change re-runs the optimization automatically.
  5. Check the Original size, Optimized size, Saving and Gzipped figures, then compare the two drawings side by side.
  6. Click Copy to copy the Optimized SVG code, or Download optimized SVG to save it as name.min.svg.

The optimization is done by SVGO 4, the standard open source (MIT) SVG optimizer used in most web build tools. Its browser version is loaded the first time you click, and it runs entirely on your device: your SVG is never uploaded.

Why SVG files from design tools are so heavy

An SVG exported from Illustrator, Inkscape, Figma or Sketch carries much more than the drawing. Editors add their own namespaces and attributes (layer names, guides, export settings), a <metadata> block, comments such as “Generator: Adobe Illustrator”, coordinates with six or more decimals, groups that contain a single element, and verbose colors like #ffffff. None of this changes what the browser draws. SVGO removes it, rounds numbers, rewrites path data with shorter commands, shortens colors and merges or unwraps redundant elements. A 40–60 % reduction is common for exported icons and illustrations.

Presets and risky plugins

  • Safe runs SVGO’s default preset but keeps IDs, <desc>, separate paths and <style> rules, with 3 decimals and one pass. Use it for SVGs referenced from CSS or JavaScript, sprites and animations.
  • Balanced is SVGO’s default preset, 3 decimals, multiple passes. It suits most icons and illustrations shown as images.
  • Maximum adds Remove </strong>, <strong>Remove scripts and event attributes</strong>, <strong>Remove width/height (keep viewBox)</strong> and <strong>Replace xlink:href by href</strong>, with 2 decimals and multiple passes.</li> </ul> <p>No preset removes the viewBox. <strong>Remove viewBox</strong> is there for special cases only: without it, the drawing can no longer scale to the size you give it in CSS.</p> <p>Know what the other plugins can break:</p> <ul> <li><strong>Shorten and remove unused IDs</strong> renames IDs such as <code>#icon-home</code> to <code>a</code>. Any CSS selector, JavaScript query, <code><use href="#…"></code> sprite reference, page anchor or SMIL/CSS animation targeting the old name stops working.</li> <li><strong>Remove <title></strong> and <strong>Remove <desc></strong> delete the accessible name and description. Keep them on meaningful icons and charts that screen readers must announce.</li> <li>A low <strong>Decimal precision</strong> can deform small icons: curves wobble and edges drift. Always check the visual comparison; 3 is a safe default.</li> <li><strong>Merge paths</strong> joins adjacent paths into one, so a hover effect or animation that targeted a single path loses its target.</li> </ul> <h2>Tips</h2> <ul> <li>Keep an unoptimized master copy for editing; treat the <code>.min.svg</code> like compiled code.</li> <li>Enable gzip or brotli on your server: text formats like SVG compress very well, and the <strong>Gzipped</strong> figure shows what visitors actually download (shown when your browser supports <code>CompressionStream</code>).</li> <li>Inline SVG can be styled with CSS and animated but is not cached separately; an SVG in <code><img></code> is cached but cannot be styled from the page.</li> </ul></div> <section class="mt-10" aria-labelledby="faq"> <h2 id="faq" class="text-2xl font-semibold">Frequently asked questions</h2> <div class="mt-4 divide-y divide-line rounded-xl border border-line bg-surface"> <details class="faq group"> <summary>Is my SVG uploaded to a server?</summary> <div class="prose px-5 pb-5"><p>No. SVGO runs in your browser. The only download is the optimizer code itself, the first time you optimize.</p></div> </details> <details class="faq group"> <summary>Why is the preview shown as images?</summary> <div class="prose px-5 pb-5"><p>SVG is a document format that can contain JavaScript and load external files. Both previews are rendered as <code><img></code> from local blob URLs, and in that mode browsers never run scripts or fetch external resources, so previewing an untrusted SVG here is safe. The optimized code itself still contains any scripts unless <strong>Remove scripts and event attributes</strong> is on (it is in <strong>Maximum</strong>).</p></div> </details> <details class="faq group"> <summary>My optimized SVG no longer scales. What happened?</summary> <div class="prose px-5 pb-5"><p>The viewBox was probably removed, either by <strong>Remove viewBox</strong> or earlier by another tool. Re-optimize the original with that plugin off.</p></div> </details> <details class="faq group"> <summary>Why did my icon sprite or animation stop working?</summary> <div class="prose px-5 pb-5"><p><strong>Shorten and remove unused IDs</strong> or <strong>Merge paths</strong> changed the elements your code refers to. Use the <strong>Safe</strong> preset, which keeps both.</p></div> </details> <details class="faq group"> <summary>The optimized file is not smaller. Why?</summary> <div class="prose px-5 pb-5"><p>The SVG is probably already minified. Try <strong>Maximum</strong> or a lower <strong>Decimal precision</strong>, and turn off <strong>Pretty print (indented output)</strong>.</p></div> </details> </div> </section> <section class="mt-10" aria-labelledby="related"> <h2 id="related" class="text-2xl font-semibold">Related tools</h2> <ul class="card-grid mt-4"><li><a class="card" href="/en/svg-to-png/"> <span class="card-title">SVG to PNG</span> <span class="card-text">Convert SVG to PNG, JPG or WebP in your browser at any width, height, scale or DPI, with a transparent or colored background. Batch and ZIP, no upload.</span> </a></li> <li><a class="card" href="/en/image-to-svg/"> <span class="card-title">Image to SVG Tracer</span> <span class="card-text">Convert a PNG or JPG logo or drawing to SVG vector paths in your browser. Presets, color count and speck filter, safe preview and download, no upload.</span> </a></li> <li><a class="card" href="/en/image-compressor/"> <span class="card-title">Image Compressor</span> <span class="card-text">Compress JPG, PNG and WebP images with a quality slider, compare sizes before and after, and batch-process photos without uploading them.</span> </a></li> <li><a class="card" href="/en/css-formatter/"> <span class="card-title">CSS Formatter and Minifier</span> <span class="card-text">Beautify messy CSS with clean indentation or minify it with csso, and see the size before and after. Runs in your browser; nothing is uploaded.</span> </a></li> </ul> </section> </article> <div class="hidden lg:block"> <div class="sticky top-24"><aside class="ad-slot ad-slot-sidebar" data-ad-slot="sidebar" aria-label="Advertisement"><span class="ad-label">Advertisement</span></aside> </div> </div> </div> </main> <footer class="mt-16 border-t border-line bg-surface"> <div class="mx-auto grid max-w-6xl gap-8 px-4 py-10 sm:grid-cols-3 text-sm"> <div> <p class="font-semibold">Utilia</p> <p class="mt-2 text-muted">Free online tools that run in your browser. Your data stays on your device.</p> </div> <nav aria-label="Categories"> <p class="font-semibold">Tools</p> <ul class="mt-2 space-y-1"><li><a class="link-muted" href="/en/text-tools/">Text tools</a></li><li><a class="link-muted" href="/en/developer-tools/">Developer tools</a></li><li><a class="link-muted" href="/en/web-tools/">Web, SEO and marketing</a></li><li><a class="link-muted" href="/en/color-tools/">Color and design</a></li><li><a class="link-muted" href="/en/image-tools/">Image tools</a></li><li><a class="link-muted" href="/en/pdf-tools/">PDF and documents</a></li><li><a class="link-muted" href="/en/math-calculators/">Math calculators</a></li><li><a class="link-muted" href="/en/finance-calculators/">Finance calculators</a></li><li><a class="link-muted" href="/en/date-time-tools/">Date and time</a></li><li><a class="link-muted" href="/en/unit-converters/">Unit converters</a></li><li><a class="link-muted" href="/en/health-calculators/">Health and fitness</a></li><li><a class="link-muted" href="/en/home-calculators/">Home, DIY, cooking and auto</a></li><li><a class="link-muted" href="/en/generators/">Generators</a></li><li><a class="link-muted" href="/en/device-tests/">Device and browser tests</a></li><li><a class="link-muted" href="/en/audio-video-tools/">Audio and video</a></li><li><a class="link-muted" href="/en/education-tools/">Education and language</a></li><li><a class="link-muted" href="/en/games/">Games</a></li></ul> </nav> <nav aria-label="Information"> <p class="font-semibold">Information</p> <ul class="mt-2 space-y-1"> <li><a class="link-muted" href="/en/about/">About</a></li> <li><a class="link-muted" href="/en/contact/">Contact</a></li> <li><a class="link-muted" href="/en/privacy/">Privacy policy</a></li> <li><a class="link-muted" href="/en/terms/">Terms of use</a></li> </ul> </nav> </div> <p class="border-t border-line py-4 text-center text-xs text-muted">© 2026 Utilia</p> </footer> </body> </html>