SVG Optimizer & Cleaner: minify SVG code online
Clean up SVG code, remove bloat and shorten paths in seconds. Optimize SVGs exported from Figma, Illustrator, Sketch or Inkscape right in your browser. Free, with a live preview, and no upload.
- Smaller SVG files
- Removes metadata
- Live preview
- 100% client-side
What is an SVG optimizer?
In short: an SVG optimizer (also called an SVG cleaner or SVG minifier) takes the code of a vector image and removes everything a browser does not need to draw it. The picture looks the same, but the file is smaller and cleaner.
SVG stands for Scalable Vector Graphics. Unlike a PNG or JPG, which store pixels, an SVG stores shapes and paths as text in an XML format. That makes it sharp at any size and easy to style with CSS. It also means every extra character in the code adds to the file size.
Design tools export SVGs so you can edit them again later, not so a website can load them quickly. Exports often carry layer names, comments, empty groups, editor namespaces and coordinates with many decimals. Cleaning them removes that extra weight, which is why optimizing is a standard step in web performance work.
How to optimize an SVG file
Three steps, about a minute, nothing to install.
- 1
Paste or upload your SVG
Paste your raw SVG code into the input box, or upload a .svg file from your computer. Nothing is sent to a server.
- 2
Review the cleaned result
The browser parses the XML, removes metadata and empty elements, and shortens path numbers. A live preview shows the result next to the original.
- 3
Copy or download
Copy the optimized code to your clipboard or download the clean .svg file. Check the preview first, then use it in your project.
What gets removed from an SVG
This table shows the kinds of data an optimizer cleans up and how safe each change usually is.
| Item | What it is | Safety |
|---|---|---|
| Editor metadata | Tags and attributes added by Figma, Illustrator, Sketch or Inkscape, such as data-name, sodipodi and editor namespaces. | Safe. Browsers ignore it. |
| XML declaration and comments | The <?xml ...?> line, DOCTYPE and comments such as "Generator: Adobe Illustrator". | Safe for inline and file use. |
| Empty groups and unused defs | Empty <g> elements and definitions that nothing references. | Safe when nothing uses them. |
| Long decimals | Path coordinates written with many decimal places, for example 12.3456789. | Safe at sensible precision. Extreme rounding can change tiny details. |
| Whitespace and line breaks | Indentation, newlines and extra spaces between attributes. | Safe. It only affects readability. |
| Redundant attributes | Default values that repeat what the browser already assumes. | Safe in almost all cases. |
| Hardcoded width and height | Fixed size attributes on the root <svg> tag, when the option is on. | Safe if a viewBox is present. Size then comes from CSS. |
| Unused or messy IDs | Layer IDs created by design tools, or IDs that are never referenced. | Check first if your CSS or JavaScript targets an ID. |
Before and after: a real example
Here is a small diamond icon exported from a design tool, and the same icon after cleaning. Both draw exactly the same shape. This is an illustration of the kind of change you can expect. Your own savings depend on your file.
Before (design tool export)
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 27.0 -->
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1"
width="24px" height="24px" viewBox="0 0 24 24">
<metadata>Created by a design tool</metadata>
<g id="empty-group"></g>
<path id="Icon_path" d="M12.0000000 2.3456789L21.5000000 12.0000000L12.0000000 21.6543211L2.5000000 12.0000000Z" fill="#4F63FF"/>
</svg>After (optimized)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.35 21.5 12 12 21.65 2.5 12Z" fill="#4F63FF"/></svg>The XML line, comment, metadata, empty group, IDs, fixed size and extra decimals are gone. The viewBox and the shape stay.
Why you should optimize your SVGs
Optimizing takes seconds and benefits both your visitors and your code base.
Faster pages
Smaller SVGs mean fewer bytes to download and parse, which helps your page load faster, especially on mobile connections.
Better Core Web Vitals
Lighter inline SVG and icon files can help Largest Contentful Paint and overall page weight, which are part of how Google measures page experience.
Cleaner code
Without editor noise, your SVG is easier to read, review in a pull request and edit by hand.
Privacy for your files
Layer names, tool names and file paths can leak into exported SVGs. Removing them keeps internal details out of your public site.
Smaller bundles
If you import SVGs into a JavaScript app, every extra byte ends up in your bundle. Optimized icons keep it lean.
Easier styling
Removing fixed sizes and clutter makes it simpler to control color and size with CSS.
Features of this SVG cleaner
Smaller files
Removes decimals, empty tags, comments and metadata. Savings depend on your file. Heavily exported design files often shrink a lot, simple icons less.
Strips editor data
Cleans the extra data added by Figma, Illustrator, Sketch and Inkscape, including data-name attributes, comments and editor namespaces.
Live preview
See the optimized SVG rendered on the page, so you can confirm the shapes, colors and strokes still look right before you copy it.
100% client-side
Your SVG is processed locally in your browser. Logos, icons and client work are never uploaded to ToolDeck.
Copy or download
Copy the code in one click for inline use, or download a .svg file for use as an image.
Free and unlimited
No sign-up, no watermark and no daily limit. Clean as many SVG files as you need.
Common SVG optimization options explained
These are the settings that matter most when you optimize an SVG, and how to choose them. The options available in the tool may vary.
| Option | What it does | Recommendation |
|---|---|---|
| Remove width and height | Deletes fixed size attributes from the root <svg> so you can size it with CSS. | Keep it on for responsive icons. Leave it off if the SVG must keep a fixed size, and always keep the viewBox. |
| Keep the viewBox | The viewBox defines the drawing area and lets the SVG scale. | Keep it on. Without a viewBox, an SVG cannot scale properly. |
| Path precision | How many decimals are kept in path coordinates. | Two to three decimals suits most icons. Use more for very large or detailed artwork. |
| Remove IDs | Deletes or shortens IDs. | Turn it off if your CSS, JavaScript, sprite sheet or gradients rely on IDs. |
| Remove comments and metadata | Deletes comments, titles added by tools and the metadata block. | Safe in most cases. Keep <title> and <desc> if you need them for accessibility. |
| Collapse groups | Merges or removes needless <g> wrappers. | Safe unless you animate or style specific groups. |
Using SVG on the web: best practices
How you add an SVG to a page affects its speed, styling and accessibility. Here are the common ways and when each makes sense.
| Method | How | Good to know |
|---|---|---|
| Inline in HTML | Paste the SVG code directly into your page. | Lets you style it with CSS and animate it. Adds to your HTML size, so optimizing matters most here. |
| As an image (img tag) | Link to a .svg file with <img src="logo.svg">. | Cached by the browser and simple to use, but CSS cannot reach inside the file. |
| As a CSS background | Use url(logo.svg) in CSS. | Good for decoration. Not read by screen readers. |
| In a JavaScript app | Import the SVG as a component or file. | Optimize it first so it does not inflate your bundle. |
| With currentColor | Set fill or stroke to currentColor. | The icon then takes the text color of its parent, which makes theming easy. |
| With server compression | Serve SVG with gzip or Brotli. | Compression works well on SVG text, and optimizing first helps it even more. |
SVG vs PNG vs WebP vs JPG
Use SVG for logos, icons and illustrations, and a raster format for photos. Picking the right format matters as much as optimizing.
| Feature | SVG | PNG | WebP | JPG |
|---|---|---|---|---|
| Type | Vector (shapes and paths) | Raster (pixels) | Raster (pixels) | Raster (pixels) |
| Scales without blur | Yes, any size | No | No | No |
| Best for | Logos, icons, illustrations, charts | Screenshots, sharp graphics | Photos and graphics on the web | Photos |
| Transparency | Yes | Yes | Yes | No |
| Style with CSS or animate | Yes (when inline) | No | No | No |
| File size for simple graphics | Often smallest | Larger | Smaller than PNG | Not suited |
| Photos | Not suited | Large | Good | Good |
Need a raster version? Try the Image Converter, and shrink PNG, JPG and WebP files with the Image Compressor.
When to be careful when optimizing SVGs
Most SVGs optimize without any trouble. These cases need a quick check of the preview, or a gentler setting.
- Animated SVGs. Animations often target IDs, classes or group structure, so turn off ID removal and group merging before you clean them.
- SVG sprites and <symbol> sets. Sprites are referenced by ID, so keep IDs if you use <use href="#icon">.
- Gradients, masks and clip paths. These are linked by ID. A good optimizer keeps used IDs, but always check the preview.
- Text. Text inside an SVG depends on the font. Convert text to outlines in your design tool if the font may be missing.
- Accessibility. Keep <title> and <desc> or aria-label if the SVG carries meaning for screen reader users.
- Very small details. Aggressive rounding can change thin strokes and fine curves. If something looks off, raise the precision.
ToolDeck vs other ways to optimize SVG
There are four common ways to clean SVG files. This table compares them on privacy, setup and convenience.
| Feature | ToolDeck SVG Cleaner | Upload-based online tools | SVGO command line | Design tool export |
|---|---|---|---|---|
| Where the file is processed | In your browser | On the provider’s servers | On your computer | In the design app |
| Setup needed | None | None | Node.js and a terminal | None |
| Cost and account | Free, no sign-up | Free tier or paid, often an account | Free | Included with the app |
| Live visual preview | Yes | Sometimes | No | Yes, in the app |
| Privacy for client work | High: the file stays on your device | Lower: a copy is uploaded | High | High |
| Batch and automation | One file at a time | Varies | Excellent for build pipelines | Limited |
| How much it shrinks files | Good for most files | Varies | Highly configurable | Often little cleaning |
| Best for | Quick, private clean-ups | Casual use | Developers automating builds | First-pass export |
The other columns describe common patterns, not any single product. Features and limits vary, so check each tool’s current terms.
Who needs an SVG cleaner
Web developers
Shrink icons and illustrations before you add them to a site or a component library.
UI and UX designers
Clean Figma, Sketch or Illustrator exports before you hand them to developers.
Front-end teams
Keep repositories tidy by committing small, readable SVG files.
SEO and performance work
Reduce page weight and improve load speed on pages that use many inline SVGs.
Bloggers and site owners
Make logos and graphics lighter without learning a command line tool.
App and email builders
Prepare small, clean vector assets for apps, templates and documentation.
Troubleshooting SVG optimization problems
Most problems come from missing viewBox values, removed IDs or very low precision. Find your symptom below.
| Symptom | Likely cause | Fix |
|---|---|---|
| The SVG looks different after cleaning | Precision was set too low, or an ID that a gradient or mask uses was changed. | Raise the path precision, keep IDs, and compare against the live preview. |
| The SVG will not scale | The viewBox is missing, so width and height were the only size information. | Add a viewBox that matches the original size, for example viewBox="0 0 24 24". |
| The SVG shows at the wrong size | Width and height were removed and the page has no CSS size for it. | Set a width or height with CSS, or leave the dimension attributes in place. |
| CSS or JavaScript no longer works on it | Classes or IDs the code relied on were removed. | Turn off ID and class cleanup, then clean again. |
| Text looks wrong | The font used in the SVG is not available on the device. | Convert text to outlines in your design tool before you export. |
| The animation stopped | Group or ID structure used by the animation was changed. | Turn off group collapsing and ID removal, or optimize the file before you add animation. |
| The file is barely smaller | The SVG was already clean or is mostly path data. | That is normal. Complex drawings have little bloat to remove. |
| Pasted code is rejected | The code is incomplete or not valid XML. | Make sure it starts with <svg and ends with </svg>, and that all tags are closed. |
Related free ToolDeck tools
Every tool below runs in your browser too, with no upload and no sign-up.
Images and graphics
Developer tools
Browse every tool on the ToolDeck home page.
Frequently asked questions
What does an SVG optimizer do?
An SVG optimizer removes unnecessary data from an SVG file without changing how it looks. This includes editor metadata, comments, empty groups, extra whitespace and overly long decimal numbers. The result is a smaller, cleaner file that loads faster.
How do I optimize an SVG file for free?
Paste your SVG code or upload a .svg file into the tool on this page. The cleaned code appears right away with a live preview. Copy it or download the file. It is free, needs no account and adds no watermark.
Will optimizing an SVG change how it looks?
It should not. The tool removes data that does not affect rendering. Always check the live preview, and if a detail looks off, raise the path precision or keep IDs, which fixes most differences.
How much smaller will my SVG be?
It depends on the file. SVGs exported from design tools often contain a lot of removable data and can shrink by a large share, sometimes more than half. Simple, hand-written icons have less to remove, so savings are smaller.
Why are SVGs from Figma or Illustrator so big?
Design tools keep information that helps you edit the file later, such as layer names, IDs, comments and very precise coordinates. A browser does not need any of it to draw the image, which is why it can be removed.
Is my SVG uploaded to a server?
No. The SVG is processed with JavaScript in your browser. Your logos, icons and client files stay on your device.
What does removing width and height do?
It deletes the fixed width and height attributes from the root <svg> tag, so you can control the size with CSS. This is recommended for responsive designs, but only when the SVG has a viewBox.
What is the viewBox and should I keep it?
The viewBox defines the SVG’s internal coordinate system and lets it scale to any size. Always keep it. An SVG without a viewBox cannot scale properly.
Should I use inline SVG or an img tag?
Use inline SVG when you want to style or animate the graphic with CSS or JavaScript. Use an img tag for simple images that the browser can cache. Optimizing matters for both, and most for inline use.
Will it break my SVG animation or sprite?
It can if the animation or sprite relies on IDs, classes or group structure that get removed. Turn off ID removal and group collapsing for those files and check the preview.
Is it safe to optimize SVGs with text?
Optimizing does not change text, but SVG text depends on the font being available on the device. For logos, convert text to outlines in your design tool first.
Does SVG optimization help SEO and page speed?
Smaller files reduce page weight and can help load times, which contribute to page experience. The effect is largest on pages that use many inline SVGs or large illustrations.
Should I also use gzip or Brotli?
Yes. Optimizing and server compression work together. Serve your SVG files with gzip or Brotli enabled for the smallest transfer size.
Can I use the cleaned SVG commercially?
Optimizing only changes the code, not the design, so the rights to the artwork stay the same as before. Use it on websites, apps and products according to the original license of the artwork.
Is there a file size limit?
ToolDeck sets no daily limit. Very large SVG files depend on your device’s memory because the work happens in your browser.
Your SVG stays on your device
Your code is parsed, cleaned and previewed inside your browser. ToolDeck does not receive, store or read your SVG files, logos or icons. See why ToolDeck is different.