FIRST CH TOOLS LOCAL PROCESSING — your files never leave this device 日本語

FIRST CH TOOLS / Images / 47 SVG OPTIMIZER

SVG Optimizer & Data URI

An SVG straight out of Illustrator or Figma is mostly the editor talking to itself. This tool runs it through SVGO and shows the before and after side by side, so you can drop all of that while checking the drawing still looks the same. The encoded data URI for a CSS background-image comes out with it, so a single icon need not cost you a separate file. Optimisation runs inside this page and nothing is uploaded.

Your SVG
Drag & drop an .svg here or click to pick a file

Figma's "Copy as SVG" and Illustrator's "Save as SVG" or "Export as" output can be pasted in as they are.

Settings
3

viewBox is never removed (without it the SVG cannot scale). For decimal places, 2–3 suits icons and 3–4 suits maps and illustrations. Zero can visibly deform a shape, so always check the preview.

How to Use

  1. Add the SVGDrag in the exported .svg or paste the code. Optimisation runs the moment it lands.
  2. Compare the two sidesRead the saving, then look at the previews. If the drawing changed, raise the decimal places; if something outside the file points at an ID inside it, untick "Tidy IDs and class names".
  3. Take it in the form you needDownload the .svg to ship it as a file, or copy the background-image line to embed it in CSS.

About This Tool

Optimisation runs inside this page. It uses a bundled copy of SVGO v4.1.0 (MIT). SVGO is best known as a Node tool, but it ships an official browser build at dist/svgo.browser.js, and that is what this page loads. So there is no build server and no upload: supplied artwork and client logos that cannot leave the building can still be processed here.

What actually gets dropped. The default set of plugins (preset-default) removes editor metadata, comments, the <?xml> declaration, unused definitions, empty groups, attributes that do nothing, and decimal places nobody can see. It also converts equivalent shapes to <path>, rewrites path coordinates in the shorter relative form, and shortens colours (#ffffff → #fff, #ff0000 → red). It does not stop after one pass — it repeats until nothing more changes (multipass). A freshly exported file typically loses 30–60% of its size.

Some things are deliberately kept. viewBox is never removed (without it the SVG cannot scale to its container, which bites hardest when it is used as a CSS background). <title> is kept by default too, because screen readers use it and SVGO's own defaults take it away. For <desc>, only the editor boilerplate ("Created with Sketch.") is dropped and a description you wrote yourself stays. <script> and on… event attributes go the other way and are removed by default: a supplied SVG is a normal hiding place for injected script — harmless in an <img>, but inlined into your HTML it runs with the same rights as your own code. Untick the box if an animation genuinely needs it.

Three shapes of data URI. For a CSS background-image, URL-encoding beats base64: base64 inflates by about a third no matter what, while an SVG is text with few troublesome characters, so percent-encoding costs less. It also stays readable, which means you can edit a colour later without re-encoding. The URL-encoded output here puts attribute values in ' quotes so the whole thing fits inside url("…"), then encodes everything with encodeURIComponent and only puts back the characters that are safe there (space, =, :, /). The base64 line is there for the places that refuse to carry punctuation. For general file-to-Base64 work, see Base64 & Data URI.

The gzipped size is shown as well. Real servers compress with gzip or Brotli, so that is the number your visitor waits for. SVG is repetitive text and compresses well, which flattens the difference the raw byte counts suggest. Optimising still pays, because some of the gap survives compression and because anything embedded as a data URI rides along inside your CSS or HTML every time.

To shrink the pictures themselves, see WebP Converter and AVIF Converter; to change dimensions, Image Resizer; QR codes that export as SVG live in QR Code Generator. For an SVG favicon, pair this with the Favicon Generator.

When it barely shrinks

There is a photo inside

If a PNG or JPEG is embedded through <image>, that part is just a block of base64. SVGO never touches pixels, so no setting will move it. Export the photo separately as WebP or AVIF and keep only the vector work in the SVG.

Paths traced from a photo

An image trace can leave tens of thousands of points. Lowering the decimal places helps a little, but the real answer is that this was probably never vector material. Once the file passes a megabyte, the original raster image will load faster.

An embedded font

An SVG carrying a font as a data URI through @font-face weighs more as font than as drawing. Convert the text to outlines, or load the font on the page and take it out of the SVG.

It was optimised already

Icons from a library are almost always optimised before release. A saving of a few percent means there is nothing left to take. Use the original rather than forcing the decimal places down until shapes deform.

An ID disappeared and it broke

Gradients, clip paths and filters are referenced by url(#id). SVGO follows references inside the file and keeps those, but it cannot see references from outside — a sprite used as <use href="#icon-x">, or an element your CSS or JS grabs. Untick "Tidy IDs and class names" in that case.

Other Tools