Remove Export and Formatting Bloat
The default SVGO pipeline removes comments, metadata, editor namespaces, empty values, and other redundant markup. It can also compact styles, colors, transforms, and groups.
Free online SVG tool - no registration or login
Free SVG Optimizer & Minifier
Upload or paste SVG markup, optimize it locally with SVGO, and compare the code, file size, and visual result before downloading. No login or server upload required.
- - Paste or load one SVG
- - Conservative SVGO defaults
- - Restricted before/after previews
- - Exact UTF-8 byte counts
One SVG · up to 2 MiB · local processing
Optimize one SVG in this browser
Paste markup or load a file, choose what SVGO may change, then compare the exact source and result before export.
Complete XML with an <svg> root. Press Ctrl/Command+Enter to optimize.
No optimized result yet
Add a complete SVG, review the settings, and run the optimizer.
The source file or pasted markup is processed in this browser tab. No external optimization request is added, and the source is not saved by this page.
- One complete SVG at a time, from pasted markup or a local .svg file up to 2 MiB.
- SVGO can restructure markup and round geometry; visual equivalence is not guaranteed.
- Restricted previews do not test scripts, external resources, or every host-page integration.
- Optimization and script removal do not certify untrusted SVG as safe to inline.
How to Optimize an SVG
Move from one well-formed SVG to deliberate transformation settings, a measured result, and an asset you can test in its real integration.
Common SVG optimization tasks
- Remove export metadata and comments from a web icon
- Minify a logo while preserving IDs used by the integration
- Compare a design-tool export before committing it to a project
- Create a readable optimized copy for manual code review
- Step 1
Add one complete SVG
Load a local .svg file up to 2 MiB or paste well-formed SVG markup. The source remains editable until you clear or replace it.
- Step 2
Choose the transformation boundaries
Keep the conservative defaults or deliberately change ID, descriptive-element, dimension, precision, script, multipass, and formatting settings.
- Step 3
Compare and export the result
Review exact byte and structure changes plus both restricted previews, then copy or download the optimized SVG and test it in the intended integration.
What SVG Optimization Changes
An SVG is XML markup, so useful savings often come from removing export data and representing the same shapes more compactly. The available reduction depends on how the source was created.
Simplify Numeric and Path Data
Coordinate precision and path transformations can save bytes, especially in detailed drawings. Lower precision rounds more aggressively, so fine geometry requires a closer visual review.
Expect Source-Dependent Results
A verbose design-tool export can offer more removable data than a hand-minified icon. A tiny or already optimized source may stay almost unchanged or become larger under preservation or readable-output settings.
Choose Safer SVG Optimization Settings
The smallest markup is not automatically the best asset. Keep information that the surrounding site, component, stylesheet, or assistive technology still needs.
Review the settingsPreserve IDs Used Outside the File
Internal URL references can be updated during ID cleanup, but external CSS selectors, JavaScript lookups, and separate inline documents are invisible to the optimizer. Preserve IDs when those dependencies may exist.
Keep Descriptive Elements by Default
An SVG title or description may contribute to an accessible name or explanation depending on how the asset is embedded. Remove those elements only after checking the final integration.
Change Dimensions Only on Purpose
Removing width and height keeps or creates a viewBox when possible, but it changes the asset's intrinsic size. Confirm the CSS or container supplies the dimensions you intend.
Review the Optimized SVG Before Shipping
The workbench provides a fast comparison, not a proof that every browser, editor, component, or animation behaves identically. Test the result where it will actually run.
Compare Both Restricted Previews
The source and result are displayed as non-interactive image resources. Use them to catch obvious color, geometry, crop, and aspect-ratio changes without inserting the SVG markup into this page.
Test Text, Filters, Animation, and References
Fonts, text spacing, filters, masks, CSS, animation, external resources, and scripts depend on context. Open the downloaded file in the intended site or application before replacing a production asset.
Keep the Editable Source
Optimized markup is usually an export artifact. Keep the original design file or readable SVG when future editing, handoff, accessibility review, or debugging matters.
Understand Local Processing and Security Limits
Local processing reduces unnecessary data transfer, while restricted previews avoid executing the source inline. Those choices do not turn an arbitrary SVG into trusted application code.
Source Processing Stays in This Tab
The selected file is read as text and passed to the installed browser SVGO build. This page does not send the source or result to an external optimization endpoint.
The Preview Does Not Execute Inline SVG
Both previews use the browser's SVG image context, where scripts are disabled and external resources are not loaded. Interactive behavior is intentionally not tested there.
Optimization Is Not Sanitization
Removing scripts and event handlers is useful for a static asset, but other risky or context-sensitive markup can remain. Never inline untrusted output without a dedicated sanitizer and security policy.
SVG Optimizer FAQ
Direct answers about SVGO, file input, IDs, dimensions, descriptive elements, byte changes, local processing, previews, and security limits.
Is this SVG optimizer free to use?
Yes. You can paste or load an SVG, optimize it, preview the result, copy the markup, and download the file without registering, signing in, or unlocking the output.
Does the tool upload or store my SVG?
No external optimization service is used. The selected file is read as text and processed in the current browser tab; this page does not add an upload or storage request for your SVG.
Which SVG optimizer does this page use?
It uses the installed browser build of SVGO 4 with the preset-default plugin pipeline plus the settings shown in the workbench. Multipass is enabled by default.
Can I upload an SVG file or paste SVG code?
Both are supported for one SVG at a time. A local .svg file can be up to 2 MiB, or you can paste a complete, well-formed SVG document into the source editor.
Will the optimized SVG always look identical?
No universal guarantee is possible. SVGO can restructure markup and round numeric values, and fonts, filters, animation, or integration-specific behavior may render differently. Compare the previews and test the downloaded result in its real context.
Why are SVG IDs preserved by default?
IDs can be referenced by gradients, masks, clip paths, CSS, JavaScript, or another document. The optimizer can update internal references, but it cannot discover every external dependency, so this page keeps IDs unless you opt into cleanup.
What does removing width and height do?
SVGO's removeDimensions option removes fixed width and height when a viewBox exists, or can derive a viewBox from plain numeric dimensions. That can make an SVG size through CSS, but it changes intrinsic sizing behavior and should be tested where the asset is used.
Does the optimizer keep SVG title and description elements?
Yes, by default. The workbench preserves <title> and <desc> because they may support accessible names or descriptions in some integrations. You can deliberately remove them for a smaller output after reviewing the context.
Does removing scripts make an SVG safe to inline?
No. The option removes script elements, event-handler attributes, and script links handled by SVGO, but optimization is not a complete sanitizer. Untrusted SVG that will be inserted inline needs a dedicated security review, sanitizer, and content policy.
Why is the optimized SVG unchanged or larger?
A source may already be compact, preservation settings can limit available transforms, readable formatting adds whitespace, or required markup can offset other savings. The result reports the actual UTF-8 byte difference instead of assuming every file becomes smaller.
Related design tools
Inspect colors, check solid-color contrast, or create CSS styling for the same interface asset.
Ia Design
Inspect and Convert SVG Colors
Pick a color visually or enter a HEX value, then fine-tune RGB, HSL, and opacity. Preview the result, compare nearby tones, and copy the exact color code with no login.
Open tool Ca Design
Check an SVG Color Pair
Test text and background colors against WCAG 2.2 AA and AAA. See the exact contrast ratio, preview the selected font size and weight, and identify whether the pair passes.
Open tool Ca Design
Create a CSS Gradient
Build linear, radial, or conic gradients with two to six color stops. Preview the result live, adjust the relevant direction or origin, and copy ready-to-use CSS without signing in.
Open tool St Design
Style the Final Interface Asset
Create layered CSS shadows with up to four editable layers. Adjust offsets, blur, spread, color, opacity, and inset mode, preview the result, and copy the CSS without login.
Open toolReady to optimize the SVG?
Add one source, keep only the transformations you understand, and compare before replacing the original asset.