- Paste your raw SVG code into the input area.
- Configure the 'Number of decimal places' to determine coordinate precision (lower values increase compression but may alter shapes slightly).
- Toggle the 'Multipass' option to run the optimizer iteratively and catch secondary optimizations.
- Click 'Optimize' to process your SVG.
- Copy the minified SVG markup and compare the original and optimized file sizes.
SVG Optimizer
SVG Optimizer tool on AzWebTools.
Result
Fill inputs and click run.
How to Use This Tool
Learn More About SVG Optimizer
Why Optimize SVGs?
Scalable Vector Graphics (SVGs) are fundamentally text files written in XML. While this makes them highly flexible, scalable, and easy to animate, it also makes them prone to code bloat. Design tools frequently inject custom namespaces, editor-specific metadata (like guides and grid settings), and excessively precise coordinates (e.g., 120.49382910 instead of 120.5). When embedding SVGs into a webpage, this bloat directly impacts your HTML payload size, increasing download times and slowing down browser parsing.
The Impact of Decimal Precision
One of the most effective ways to reduce SVG file size is by lowering coordinate precision. A vector line does not usually need eight decimal places to look sharp on a screen. By truncating coordinate precision to 1 or 2 decimal places, you can drastically reduce the character count of path data. However, be cautious with extremely small viewboxes, where aggressive rounding might cause visual distortion.
What is Multipass Optimization?
Some SVG optimizations unlock further optimization opportunities. For example, if an initial pass removes an invisible or unreferenced element, the group containing it might become entirely empty. A single-pass optimizer would leave that empty group behind in the code. By enabling a 'multipass' feature, the optimizer runs its routine repeatedly until no further reductions can be made, ensuring you achieve the absolute minimum file size.
The Origin of SVG Optimization
Scalable Vector Graphics (SVG) is an XML-based vector image format developed by the World Wide Web Consortium (W3C) starting in 1999, with version 1.0 released in 2001. Because SVGs are plain text XML documents, they are easily manipulated but heavily prone to code bloat when generated by graphical editors. Tools like SVGO (a Node.js-based SVG Optimizer) were subsequently developed by the open-source community to automatically strip non-essential data, standardize code, and round path coordinates, making SVGs highly performant for modern web development.
SVGs are XML-based vector graphics. Optimization safely strips excessive metadata and coordinate precision injected by design software, making them web-ready.
- Format
- XML-based Vector Graphics
- Standardized by
- W3C (World Wide Web Consortium)
- Initial Release
- 2001 (SVG 1.0)
Examples
Default (Safe)
Runtime-verified example for svg-optimizer
Input
{"multipass":"false","floatPrecision":3}Output
{
"multipass": "false",
"floatPrecision": 3
}Maximum Compression
Runtime-verified example for svg-optimizer
Input
{"multipass":"true","floatPrecision":1}Output
{
"multipass": "true",
"floatPrecision": 1
}Sample Scenario
Runtime-verified example for svg-optimizer
Input
{"svgCode":"<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"100px\" height=\"100px\" viewBox=\"0 0 100 100\" enable-background=\"new 0 0 100 100\" xml:space=\"preserve\">\n <g>\n <rect x=\"10.500\" y=\"10.500\" width=\"80.000\" height=\"80.000\" fill=\"#ff0000\" />\n </g>\n</svg>","multipass":"true","floatPrecision":3}Output
{
"svgCode": "<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"100px\" height=\"100px\" viewBox=\"0 0 100 100\" enable-background=\"new 0 0 100 100\" xml:space=\"preserve\">\n <g>\n <rect x=\"10.500\" y=\"10.500\" width=\"80.000\" height=\"80.000\" fill=\"#ff0000\" />\n </g>\n</svg>",
"multipass": "true",
"floatPrecision": 3
}Use Cases
- Reducing the file size of website icon libraries and UI vectors for faster page loads.
- Preparing inline SVG code to keep the DOM tree lightweight and manageable.
- Stripping proprietary metadata and comments from assets exported via Adobe Illustrator, Sketch, or Figma.
- Optimizing complex vector illustrations before converting them into React, Vue, or other framework components.