Skip to content

SVG Optimizer

Minify and clean SVG markup to reduce file size while preserving visual quality. Remove metadata, comments, editor data, and optimize colors, paths, and IDs with configurable precision.

Updated

What is the SVG Optimizer?

The SVG Optimizer is a free, browser-based tool that minifies and cleans SVG markup to dramatically reduce file size without affecting visual quality. Whether you are a web developer optimizing icons, a designer exporting assets from Figma or Illustrator, or a DevOps engineer automating asset pipelines, this tool helps you strip unnecessary bloat from Scalable Vector Graphics in seconds.

Why Optimize SVGs?

SVG files exported from design tools like Adobe Illustrator, Figma, Sketch, and Inkscape often contain hidden metadata, editor-specific namespaces, comments, default attributes, and excessive decimal precision. While invisible to the end user, this overhead inflates file sizes, slows page loads, and increases bandwidth costs. A typical unoptimized icon can shrink by 30% to 80% after optimization, with some complex illustrations compressing even further.

What This Tool Does

Paste any SVG markup or upload an .svg file, and the optimizer instantly applies a comprehensive set of optimization passes. You control every setting through an intuitive checkbox panel, allowing you to balance aggressive minification against the need to preserve metadata, scripts, or specific attributes. The tool runs entirely in your browser — no data is ever sent to a server.

Key Capabilities

  • Remove metadata, comments, and DOCTYPE declarations — Strip invisible editor data and HTML comments.
  • Clean up IDs — Remove unused identifiers and shorten referenced ones for smaller file sizes.
  • Minify colors — Convert rgb(), rgba(), hsl(), and long hex codes to their shortest equivalent.
  • Round numbers — Reduce decimal precision in path data, coordinates, and transforms.
  • Collapse groups — Remove redundant <g> wrappers that have no attributes.
  • Merge paths — Combine adjacent <path> elements with identical styling.
  • Convert shapes to paths — Replace <rect>, <circle>, <ellipse>, <line>, <polyline>, and <polygon> with equivalent path data when it results in a smaller output.
  • Remove hidden elements — Discard elements with display="none" or visibility="hidden".
  • Remove editor data — Strip Inkscape, Sodipodi, Adobe, Sketch, and Figma-specific namespaces and attributes.
  • Remove scripts and event handlers — Eliminate <script> tags and on* attributes for security.
  • Sort attributes — Reorder attributes alphabetically to improve gzip compression ratios.
  • Live preview — See your original and optimized SVG rendered side-by-side in real time.
  • Export options — Copy the optimized markup, copy as a Base64 data URI, or download the .svg file directly.

Who Should Use This Tool?

  • Front-end developers optimizing icon sets and illustrations for production websites.
  • UI/UX designers cleaning up exports before handoff to engineering.
  • Performance engineers auditing and reducing asset payload sizes.
  • Content creators preparing SVGs for embedding in blogs, documentation, or presentations.
  • Security-conscious teams removing potentially harmful scripts from third-party SVG assets.

How it works

The SVG Optimizer is built on a custom, pure-JavaScript SVG parser and serializer that runs entirely client-side. When you paste or upload an SVG, the tool converts the raw markup into an abstract syntax tree (AST), applies a series of configurable optimization passes, and then serializes the tree back into clean SVG markup.

Step 1: Parsing

The input string is scanned character-by-character to build an XML tree structure. The parser handles:

  • XML declarations (<?xml ...?>)
  • DOCTYPE declarations
  • HTML and XML comments (<!-- ... -->)
  • CDATA sections
  • Self-closing and standard elements
  • Attributes with single quotes, double quotes, or no quotes
  • Namespaced attributes and elements

If the input does not contain a valid <svg> element, the tool throws a clear error message.

Step 2: Optimization Passes

Once parsed, the AST is transformed by a pipeline of independent optimization passes. Each pass can be toggled on or off via the settings panel. The passes run in a carefully ordered sequence to ensure correctness — for example, unused IDs are removed before remaining IDs are shortened, and empty containers are removed only after their children have been processed.

Structural Cleanup

Pass Description
Remove XML declaration Strips <?xml version="1.0" ...?> since it is unnecessary for inline SVGs.
Remove DOCTYPE Eliminates <!DOCTYPE svg ...> which is invalid in HTML5.
Remove comments Discards all <!-- ... --> blocks.
Remove metadata, title, desc Removes <metadata>, <title>, and <desc> elements which are invisible to users.
Remove scripts & events Deletes <script> elements and all on* event handler attributes (e.g., onclick). Also removes javascript: URLs.
Remove editor data Strips namespace declarations and attributes from Inkscape, Sodipodi, Adobe, Sketch, Figma, and Microsoft tools. Removes data-* attributes.
Remove hidden elements Drops elements with display="none", visibility="hidden", or visibility="collapse".
Remove empty containers Removes empty <g>, <defs>, <clipPath>, <mask>, <pattern>, <symbol>, <marker>, <switch>, and <a> elements that have no meaningful attributes.
Remove empty attributes Deletes attributes with empty string values.
Remove default attributes Removes attributes that match SVG default values (e.g., display="inline", transform="none", version="1.1").

ID and Namespace Management

Pass Description
Clean up IDs First, removes id attributes that are never referenced by url(#id), href="#id", or CSS. Then, shortens all remaining IDs using a base-52 alphabet (a–z, A–Z) to produce the shortest possible unique identifiers. References in attributes, inline styles, and <style> blocks are updated automatically.
Remove unused namespaces Deletes xmlns:* declarations for prefixes that are not actually used by any element or attribute in the document.

Style and Color Optimization

Pass Description
Remove useless stroke & fill When stroke="none", removes related attributes like stroke-width, stroke-linecap, stroke-dasharray, etc. When fill="none", removes fill-rule and fill-opacity.
Minify colors Converts rgb(r,g,b) → #hex, rgba(r,g,b,a) → #hex or transparent, hsl(h,s%,l%) → #hex, and collapses long hex codes to short form (#ff0000 → #f00). Also maps named colors (black → #000, white → #fff) to their shortest equivalent.

Geometry and Path Optimization

Pass Description
Round numbers Rounds all numeric values to the configured precision (0–10 decimal places). This includes path data (d), points, viewBox, transform functions, stroke-dasharray, and all other numeric attributes.
Collapse groups Removes <g> elements that have no attributes, hoisting their children up to the parent.
Merge paths Combines consecutive <path> elements that share identical non-d attributes by concatenating their d values with a space separator.
Convert shapes to paths Replaces <rect>, <circle>, <ellipse>, <line>, <polyline>, and <polygon> with mathematically equivalent <path> elements, but only when the resulting path string is actually shorter than the original shape markup.
Prefer viewBox Removes width and height attributes from the root <svg> when a viewBox is present, allowing the SVG to scale responsively.
Remove xmlns Strips the xmlns and xmlns:xlink attributes from the root <svg> — safe when the SVG is embedded directly in HTML5.
Remove raster images Deletes <image> elements that reference raster assets (PNG, JPEG), keeping only pure vector content.
Sort attributes Reorders attributes alphabetically on every element. While this does not reduce raw file size, it improves gzip compression by creating more repetitive patterns.

Step 3: Serialization

The optimized AST is converted back to a string. Two output modes are supported:

  • Minified: All whitespace between elements is collapsed, text nodes are trimmed, and the output is a single compact line.
  • Prettified: Elements are indented with two spaces per nesting level, making the output human-readable for debugging or version control.

Step 4: Metrics and Preview

The tool calculates:

  • Original size — UTF-8 byte count of the input.
  • Optimized size — UTF-8 byte count of the output.
  • Savings percentage — The proportional reduction in file size.
  • Gzipped estimate — An entropy-based heuristic that predicts how small the optimized SVG would be after gzip compression.
  • Element count — The total number of elements remaining in the optimized tree.

Both the original and optimized SVGs are rendered as images using data URIs so you can visually verify that the optimization did not corrupt the graphic.

Examples

Clean up a bloated icon export

Remove metadata, comments, and default attributes from an SVG exported from a design tool.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by Figma -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1">
  <metadata>
    <rdf:RDF>
      <cc:Work>
        <dc:title>Search Icon</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <title>Search</title>
  <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z" fill="#000000" stroke="none" stroke-width="1" fill-rule="evenodd"/>
</svg>
 
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5z" fill="#000"/></svg>

Minify colors and round path data

Convert verbose color formats to short hex and reduce decimal precision in path coordinates.

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="rgb(255, 0, 0)"/>
  <rect x="10" y="10" width="80" height="80" fill="#00ff00" stroke="rgba(0, 0, 255, 1)" stroke-width="2.500000"/>
  <path d="M 10.123456, 10.123456 L 90.876543, 90.876543" stroke="hsl(240, 100%, 50%)"/>
</svg>
 
<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#f00"/><rect x="10" y="10" width="80" height="80" fill="#0f0" stroke="#00f" stroke-width="2.5"/><path d="M10.123,10.123L90.877,90.877" stroke="#00f"/></svg>

Convert shapes to paths and merge

Replace basic shapes with shorter path equivalents and merge adjacent paths with identical styling.

<svg viewBox="0 0 100 100">
  <g fill="none" stroke="#000">
    <line x1="0" y1="0" x2="50" y2="50"/>
    <line x1="50" y1="50" x2="100" y2="0"/>
  </g>
  <circle cx="50" cy="50" r="20" fill="#000"/>
</svg>
 
<svg viewBox="0 0 100 100"><path fill="none" stroke="#000" d="M0,0L50,50 M50,50L100,0"/><path d="M30,50a20,20 0 1,0 40,0a20,20 0 1,0 -40,0" fill="#000"/></svg>

Clean up IDs and remove hidden elements

Shorten referenced IDs, remove unused ones, and strip invisible elements from the document.

<svg viewBox="0 0 100 100">
  <defs>
    <linearGradient id="myVeryLongGradientName" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#fff"/>
      <stop offset="100%" stop-color="#000"/>
    </linearGradient>
    <clipPath id="unusedClipPath">
      <rect width="10" height="10"/>
    </clipPath>
  </defs>
  <rect width="100" height="100" fill="url(#myVeryLongGradientName)"/>
  <rect width="100" height="100" fill="red" display="none"/>
</svg>
 
<svg viewBox="0 0 100 100"><defs><linearGradient id="a" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#fff"/><stop offset="100%" stop-color="#000"/></linearGradient></defs><rect width="100" height="100" fill="url(#a)"/></svg>

Frequently asked questions

Will the SVG Optimizer change how my image looks?

No. Every optimization pass is designed to preserve visual fidelity. The tool only removes invisible data (metadata, comments, hidden elements) or rewrites values into mathematically equivalent shorter forms (color codes, path data rounding). The live side-by-side preview lets you verify the output visually before using it.

Is my SVG data sent to a server?

No. The SVG Optimizer runs entirely inside your browser using client-side JavaScript. Your files and markup never leave your device. This makes it safe to use with proprietary or confidential assets.

What is the difference between "Minified" and "Prettified" output?

Minified output removes all unnecessary whitespace and produces a single compact line of markup — ideal for production deployment. Prettified output preserves logical indentation and line breaks, making the SVG easier to read, diff in version control, or debug by hand.

How does the precision setting work?

The precision slider (0–10) controls how many decimal places are preserved for all numeric values in the SVG. A value of 3 (the default) rounds coordinates like 10.123456 to 10.123. Lower values produce smaller files but may slightly alter curves at extreme zoom levels. For icons and standard web graphics, 2 or 3 is usually sufficient.

Can I optimize SVGs exported from Figma, Sketch, or Adobe Illustrator?

Yes. The tool is specifically designed to clean up SVGs exported from design tools. The "Remove editor data" pass strips Figma, Sketch, Adobe, Inkscape, and Sodipodi namespaces, attributes, and metadata. The "Remove metadata, title, desc" pass removes <title> and <desc> elements that design tools often inject automatically.

What does "Clean up IDs" do?

This pass performs two operations. First, it removes any id attributes that are never referenced elsewhere in the document (via url(#id), href="#id", or CSS). Second, it shortens all remaining IDs to the smallest possible unique string using a base-52 alphabet (e.g., id="myLongDescriptiveName" becomes id="a"). All references are updated automatically so links do not break.

Why would I want to convert shapes to paths?

Some SVG renderers and animation libraries work more reliably with <path> elements than with basic shapes like <rect> or <circle>. Additionally, a path representation is sometimes more compact than the original shape markup, especially after rounding. The tool only performs the conversion when the resulting path string is actually shorter.

What is the "Gzipped (est.)" size?

This is an estimated byte count of the optimized SVG after gzip compression, the same algorithm web servers use to compress assets before sending them over the network. It is calculated using an entropy heuristic based on character diversity and repetition. The actual gzipped size may vary slightly depending on the compression level used by your server.

Can I remove scripts from an SVG for security reasons?

Yes. Enable "Remove scripts & events" to strip all <script> elements, on* event handler attributes (such as onclick and onload), and javascript: URLs. This is recommended when accepting SVGs from untrusted sources or when embedding them in environments where script execution is undesirable.

Does the tool support file upload?

Yes. You can paste SVG markup directly into the code editor or click the file upload button in the top-right corner of the input area to select an .svg file from your computer. The file is read locally using the FileReader API.

What happens if I upload a non-SVG file?

The tool validates the file extension and MIME type. If the uploaded file is not an .svg or does not have the image/svg+xml MIME type, the input is cleared and no optimization is attempted. The tool also validates that the markup contains a valid <svg> element before processing.

Can I use the optimized SVG as a data URI?

Yes. After optimization, click "Copy Data URI" to copy the SVG as a data:image/svg+xml URI. This is useful for embedding small icons directly in CSS background-image, HTML src attributes, or JavaScript strings without requiring a separate file request.

Why does "Sort attributes" not reduce the file size immediately?

Sorting attributes alphabetically does not change the raw byte count of the SVG, but it improves the compression ratio when the file is gzipped by a web server. Gzip works by finding repeated patterns; consistent attribute ordering creates more repetition across elements, leading to smaller compressed payloads.

What are the default settings optimized for?

The default settings strike a balance between aggressive size reduction and safety. They remove invisible metadata, comments, editor data, hidden elements, and default attributes, while preserving IDs, shapes, and scripts. This profile is suitable for most production web assets. You can toggle individual passes on or off depending on your specific requirements.

Can I revert to the default settings after changing them?

Yes. Click the "Reset to Defaults" button at the top of the settings panel to restore all toggles and the precision slider to their original values.

Related tools

More utilities you might find handy.

Developer

.env File Generator

Quickly generate clean, properly-quoted .env files from key-value pairs — no more quoting errors or broken deployments.
Developer

.htaccess Redirect Builder

Generate error-free Apache .htaccess code for 301 redirects, HTTPS enforcement, and canonical URL routing.
Developer

ASCII Converter – Text to ASCII, Hex, Binary & Back

Convert text to ASCII codes and decode back in decimal, hex, binary, or octal — live, private, and 100% browser-based.