SVG Optimizer
Shrink SVG icons and illustrations with SVGO — previewed safely, nothing uploaded.
Your SVG
Optimised
Previews are drawn as images, so scripts inside the SVG never run.
Files
Options
About the SVG Optimizer
Make SVG files smaller without changing how they look. Paste SVG code or drop one or many .svg files, and SVGO — the open-source optimiser used by most build tools — removes editor data, comments and hidden elements, rounds long numbers, shortens path data and colours, and merges what it can. You see the size before and after (and gzipped), an editable code box, and the original and optimised versions side by side.
Previews are drawn as images, so scripts inside an SVG never run, and a visual check draws both versions and compares their pixels, so you know at once if an option changed the picture. Download each file, copy the code, or get every file in one ZIP. Everything happens in your browser; nothing is uploaded.
How to use it
- Drop or choose
.svgfiles, or paste SVG code into the code box. Select Load example to try it first. - Read the new size and saving, and compare the two previews. The visual check says whether the optimised file looks the same.
- Adjust the options if needed: Number precision for smaller files, Prefix IDs for SVGs that will be inlined together, Make it responsive to drop width and height.
- Select Download SVG or Copy code — or, with several files, Download all (ZIP).
Examples
A 1.24 KB (1,273-byte) check-mark badge with Inkscape metadata, comments and 6-decimal numbers
342 bytes (−73 %), visually identical
Turning on Turn style="…" into attributes saves another 31 bytes for this file.
M 34.123456,61.987654 L 51.000000,78.500000 L 86.876543,42.123456
M34.123 61.988 51 78.5l35.877-36.377
Numbers rounded to 3 decimals, a repeated command left out, and the last point written relative to the previous one.
Both files use id="gradient"
With **Prefix IDs and classes**: id="logo-gradient" and id="icon-gradient"
Without prefixes, the second gradient reference would point at the first file’s gradient.
Common uses
- Cleaning up icons and logos exported from Illustrator, Inkscape, Figma or Sketch before adding them to a website or app.
- Preparing SVGs to inline in HTML or a React/Vue component, with prefixed IDs so they cannot clash.
- Removing scripts and event handlers from SVG files received from others before using them.
- Batch-optimising an icon set and downloading it as one ZIP.
What gets removed or rewritten
- Editor data: Inkscape, Illustrator, Sketch and Figma namespaces,
<metadata>, the XML declaration, DOCTYPE and comments (comments that start with<!--!, used for licences, are kept). - Numbers and paths: coordinates rounded to the chosen precision, path commands shortened and made relative where that is shorter, simple shapes turned into paths.
- Structure: empty or useless groups, hidden elements, unused definitions and IDs, attributes that only repeat the default value.
- Scripts:
<script>elements, everyon…=event attribute (in any letter case),javascript:links and animations that would set them, when Remove scripts is on (the default). This also makes SVGs from others safer to use. - Kept by default:
<title>(screen readers announce it) and theviewBox(needed to scale the SVG with CSS).
When optimising can change the picture
- Too few decimals: small icons (24 × 24) drawn with 0 or 1 decimals can get wobbly curves. The visual check catches this; raise the precision.
- IDs used from outside: CSS or JavaScript in your page that targets
#ids inside the SVG breaks when IDs are shortened. Turn off Shorten and remove unused IDs. - No viewBox: an SVG without a viewBox cannot be scaled with CSS. Keep it, unless you know you do not need it.
- No xmlns: only inline SVG in HTML can drop it; an
.svgfile without it no longer opens as an image. - style="…" to attributes: presentation attributes are weaker than CSS rules, so a
<style>block can then win.
Size, gzip and the web
Web servers usually compress SVG with gzip or Brotli on the way to the browser, so the gzipped size is closer to what visitors download. Optimising still helps: it removes data compression cannot (editor data, extra decimals) and makes the file faster to parse. Multipass runs SVGO again until nothing changes, which usually saves a little more.
Limitations
- SVGO rewrites code, so formatting and some element order change; keep your original file for further editing.
- Files up to 15 MB each and 200 files at a time. Very complex files can take a while; one file is stopped after 30 seconds.
- The visual check compares the two versions at up to 320 px and treats small anti-aliasing changes as equal, so a change smaller than a pixel at that size may go unnoticed. In browsers that block reading such images, compare the previews by eye.
- Embedded bitmaps (PNG or JPEG inside the SVG) are not recompressed; use the image compressor on them first.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Is SVG optimisation lossless?
Almost. Removing editor data, comments and unused definitions changes nothing visible. Rounding numbers moves points by tiny amounts (around a thousandth of a pixel at 3 decimals), which is invisible at normal sizes. The visual check compares both versions so you can be sure.
Why did my file get bigger?
Pretty-printing adds line breaks and spaces, and ID prefixes add characters. A file that was already optimised may not get smaller. Turn off Pretty-print for the smallest file.
Will it remove the title or make my SVG inaccessible?
No. <title> is kept unless you tick Remove <title>. Keep it for meaningful images; for decorative icons, aria-hidden="true" in your HTML is the better fix.
How do I make an SVG responsive?
Tick Make it responsive (remove width and height). The viewBox stays, so the SVG fills the width of its container and keeps its shape; set its size with CSS.
Is it safe to open SVG files from others here?
Yes. Previews are drawn as images, where browsers never run scripts or load other files, and nothing is uploaded. With Remove scripts on, the optimised file has no scripts, event handlers or javascript: links either. It can still refer to files elsewhere (images, fonts or CSS), which a browser loads when the SVG is opened as a page or pasted into one — look for http in the code if the file came from someone you do not trust.
Can I optimise many files at once?
Yes — drop up to 200 files. Each one is optimised with the same options, the list shows every saving, and Download all (ZIP) gives you them in one file.