Optimise an SVG without uploading it
Optimising an SVG removes the parts of the markup that do not affect the drawing. Those parts include editor metadata and comments, which makes it a disclosure step as much as a file size one.
At a glance
- Tool
- /tools/svg-optimizer
- Input and output
- SVG markup, still scalable afterwards
- Typically removed
- Editor metadata, comments, unused definitions and excess coordinate precision
- Preserved
- The rendered drawing
- Why it matters beyond size
- The removed parts can name clients, projects and people
- Check afterwards
- Read the output, it is plain text
In detail
An icon set exported from a design tool ships with a great deal more than paths. The exporting application writes its own name and version, layer names arrive as identifiers, and comments survive verbatim. In a public repository or a shipped page, every one of those strings is readable by anyone who views the source, and nobody views the source until it is embarrassing.
Optimising handles the weight and the leftovers in the same pass, and keeps the drawing. Unlike rasterising it stays scalable and editable, so it is the right operation when the SVG is going into a product rather than into a slide. It is also the operation whose output you can read yourself, which is unusual and worth using.
Do read it. An optimised SVG is short, and a leftover project name in a two hundred character file is trivial to spot and trivial to leave in. Then compare the rendering before and after: aggressive precision reduction can move a point by a fraction of a pixel, which shows up on hairlines and on tightly fitted shapes.
Confirm the local claim by pasting markup in with the network disconnected. Optimising markup is text processing, so it completes offline, which is the same reason a hosted optimiser has no technical need for your file in the first place.
Things that catch people out
- Read the optimised markup before committing it. It is plain text, so a leftover client or project name takes seconds to find.
- Compare the rendering before and after. Reduced coordinate precision can visibly shift thin lines.
- Keep the original export. An optimised SVG is harder to take back into a design tool.
- An optimiser has no way of knowing which identifiers your own code relies on. If a stylesheet or a script targets an element inside the drawing by its id or class, confirm that name still exists in the output.
Try it: Hash Generator
The file hasher is on every page here because it takes any file at all and proves the point: disconnect from the network, drop a file in, and it still returns a checksum you can compare against a published one.
Hash Generator
LOCAL · Browser-OnlyGenerate MD5, SHA-1, SHA-256, SHA-384, SHA-512, SHA3-256, SHA3-512, Keccak-256, CRC32, and HMAC hashes from text or files
MD5 is cryptographically broken and should not be used for security purposes. Use SHA-256 or SHA-512 instead.
Related Working without uploading
All working without uploading →Convert SVG to PNG without uploading the file
Rasterise an SVG to PNG, JPEG or WebP in your browser. Why an SVG is a text file that usually carries layer names and editor metadata.
Minify JavaScript without uploading your source
Minify scripts and stylesheets in your browser. Source carries comments, endpoints and internal names, and minifying is not obfuscation.
Format and validate JSON without uploading it
Tidy and check JSON in your browser. The JSON people paste into a formatter is usually a live API response full of real records.
Watermark a photo without uploading the original
Add a text or image watermark to a photo in your browser. Why a watermarked photo still carries all the EXIF it started with.
Open and filter a CSV without uploading it
Sort, filter and hide columns across up to 100,000 rows locally. A customer export is personal data, and opening it should not be a transfer.
Convert CSV to JSON without uploading the file
Convert between CSV and JSON in your browser. The traps that silently change data: leading zeros, dates, delimiters, empty versus null.
Tools for this
- SVG Optimizer Free online SVG optimizer - paste SVG code and get a minified, optimized version instantly
- SVG to PNG Converter Free online SVG to png converter - convert SVG images to PNG or JPEG format
- CSS Minifier Free online CSS minifier - minify your CSS code to reduce file size and improve load times