DevTools Logo

SVG Optimizer

SVG Optimizer

Reduce SVG file size using SVGO.

Examples

Remove an SVG comment in Safe mode

Input
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><!-- note --><rect x="0" y="0" width="100" height="100" fill="red"/></svg>
Output
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="0" y="0" width="100" height="100" fill="red"/></svg>

The Safe plugin list removes the comment while retaining the rectangle and its explicit attributes.

Merge adjacent paths in Aggressive mode

Input
<svg xmlns="http://www.w3.org/2000/svg"><g><path d="M0 0h10v10H0z"/><path d="M20 0h10v10H20z"/></g></svg>
Output
<svg xmlns="http://www.w3.org/2000/svg"><path d="M0 0h10v10H0zM20 0h10v10H20z"/></svg>

Aggressive optimization collapses the group and combines the compatible path data into one path element.

About this tool

SVG Optimizer reduces SVG markup with SVGO directly in the browser. Safe mode removes comments, empty attributes, redundant groups, unused definitions, and unnecessary attribute syntax while avoiding the more structural transformations enabled by Aggressive mode.

Aggressive mode adds ID cleanup, path merging, shape-to-path conversion, hidden-element removal, and style minification. The page updates after a short delay, reports the UTF-8 byte counts and percentage saved, previews the result, and lets you copy or download optimized.svg.

How to use

  1. Add an SVG

    Paste SVG markup into the input or load a .svg file from your device.

  2. Choose an optimization mode

    Use Safe for conservative cleanup, or Aggressive when path, ID, shape, and style transformations are acceptable.

  3. Review the result

    Compare the original and optimized byte counts, inspect the generated markup, and check the rendered preview.

  4. Export the optimized asset

    Copy the output or download it as optimized.svg after confirming that it still renders as intended.

Use cases

Preparing icons for production

Reduce repetitive markup before shipping SVG icons in an application bundle or static asset directory.

Checking optimization impact

Compare byte counts and visually preview the transformed asset before replacing the original file.

Cleaning exported artwork

Remove comments, empty attributes, redundant groups, and unused definitions left by design tools.

Optimizing inline SVG

Produce smaller markup to paste into components, templates, documentation, or email assets.

Common mistakes

Mistake:Using Aggressive mode without checking whether IDs, CSS selectors, or scripted references depend on the original structure.

Fix:Start with Safe mode and inspect the preview; use Aggressive only after testing every external reference and interaction.

Mistake:Assuming a successful preview proves the SVG is safe to embed in every context.

Fix:Treat optimization and security sanitization as separate concerns and apply a context-appropriate SVG sanitizer before accepting untrusted markup.

Mistake:Comparing character counts instead of the byte figures shown by the tool.

Fix:Use the reported UTF-8 byte sizes when evaluating transfer or storage savings.

Mistake:Replacing the source asset without retaining a reviewable original.

Fix:Keep the original in version control and compare the rendered output at all required sizes before committing the optimized file.

Frequently asked questions

Related guides

How to Convert SVG to PNG Online (Without Uploading Files)

Rasterize SVG icons and illustrations to PNG in your browser. Custom width, scale, background color, and privacy-first local conversion.

Optimizing SVG Graphics for Web Performance and Live Previewing

How SVGO strips metadata, cleans paths, and reduces vector file sizes by up to 70%, with live SVG previewing and inspection.

References & standards

Related tools

Barcode Generator

Generate barcodes in 8 formats (CODE128, EAN13, UPC, and more) — configure line width, height, and text display, then download as SVG or PNG.

Base64 Image Encoder

Open the Image workspace in Base64 Toolbox to resize and convert images to Base64 data URIs, then copy HTML, CSS, Markdown or JavaScript snippets.

EXIF Viewer & Cleaner

View and remove EXIF metadata from images. See camera info, GPS location, and dates — then download a clean copy.

Favicon Pack Generator

Generate complete favicon packs with all standard sizes and Apple touch icons

Image Compressor

Compress JPEG, PNG, and WebP images in your browser. No uploads, completely private.

Image Format Converter

Convert images between different formats like PNG, JPG, WebP, and more