Refract

SVG optimiser

Shrink SVG files by stripping editor metadata, comments and excess precision, without changing how they look. Uses SVGO, the standard SVG optimiser, inside your browser.

Runs in your browser · files stay on your device
Optimised SVG




Settings










How to use the svg optimiser


  1. Add your SVGs. Drop one or more SVG files onto the page, choose them from your computer, or paste SVG code straight from your editor.
  2. Choose your settings. The defaults suit most icons and logos. Lower the decimal precision for smaller files, and decide whether to keep the title and description for screen readers.
  3. Compare before and after. Each file shows the original and optimised versions side by side with the size saving, so you can spot any visual change before you use it.
  4. Copy or download. Copy the optimised code to paste inline, or download a single file or a ZIP of the whole batch.


What SVG optimisation removes
Design tools save far more than the browser needs: editor namespaces, metadata, hidden layers, comments, default attribute values and coordinates with six or more decimal places. Optimisation removes or rewrites these without changing the drawing. Icons exported from design apps commonly shrink by half or more.
Precision and viewBox
Decimal precision has the biggest effect on size. Two or three decimal places are plenty for icons and logos displayed at normal sizes; very detailed illustrations may need more. Removing width and height while keeping the viewBox lets the SVG scale to its container, which is usually what you want on the web.
Safer SVGs
SVG files can contain scripts and event handlers, which matters if you accept SVGs from other people or paste them inline. With the default settings, Refract removes them. Previews on this page are shown as images, so nothing inside a file can run here.


Frequently asked questions


Are my SVG files uploaded?
No. Optimisation runs in your browser using SVGO, so your files never leave your device.
Will optimising change how my SVG looks?
With the default settings it shouldn't. Very low precision, such as 0 or 1 decimal places, can slightly distort curves on detailed artwork, so compare the before and after previews.
Is this an SVG optimizer like SVGOMG?
Yes. It uses the same SVGO engine behind SVGOMG and many build tools, with batch processing and ZIP downloads added.
Should I keep the title element?
If the SVG is meaningful, such as a logo or chart, keep the title so screen readers can describe it. Purely decorative icons can drop it and use aria-hidden instead.