SVG viewer and optimizer

Paste SVG code or open a file to see the picture next to its code. Switch the background, zoom in, then shrink the file with SVGO and copy or download it.

Runs in your browser, nothing is uploaded

The preview appears here.

Reading the SVG…

Have a PNG or JPG? Vectorize it

SVG.new traces PNG, JPG and WebP images into SVG paths you can edit, recolor and download. Your first conversion needs no account.

Do this from Claude Code or Codex

Your coding agent can already read and edit SVG code. Add the SVG.new MCP server and it can also turn PNG, JPG and WebP files into SVG, recolor SVGs and cut their colors, right in your repo.

How to view and optimize an SVG

  1. 1

    Paste the code or open the file

    Paste SVG markup into the code box, drop an .svg file on it or press Open file. The preview follows as you type, so you can edit the code and watch the result.

  2. 2

    Check it on light, dark and checkered backgrounds

    The checkerboard shows which parts are transparent; the dark background shows white shapes and strokes that disappear on white. Zoom in to inspect edges, or press the percentage to see the SVG at its actual size.

  3. 3

    Optimize, compare and save

    Press Optimize with SVGO. The sizes before and after appear under the button, and the preview switches to the optimized file so you can compare it with the original. Then copy the code or download the .svg file.

What the optimizer changes

Removed
Comments, the XML declaration, editor metadata from Inkscape, Illustrator and Sketch, empty groups, unused definitions and attributes that only repeat the default value.
Shortened
Path data and numbers (rounded to 3 decimal places), colors (#ffffff becomes #fff), transforms, and ids, which become one or two letters.
Kept
The viewBox, the <title>, data and aria attributes, and everything that changes how the SVG looks.
Options
Keep ids leaves ids as they are, for CSS or scripts outside the file. Strip scripts and event handlers is on by default and also removes javascript: URLs. Pretty print indents the output so it is easier to read.

Going on to use the SVG in code? Turn it into a React component with the SVG to JSX converter, or into a CSS background with SVG to data URI.

Questions about the SVG viewer

Is my SVG uploaded anywhere?
No. The viewer and the optimizer run in your browser. The SVG is read from the text box or from the file you open, and it is never sent to a server, so you can check private or unreleased artwork here.
Is it safe to preview an SVG that contains scripts?
Yes. The preview shows the SVG as an image, the way an <img> tag does, so <script> elements, event handlers such as onload and links to other files do not run or load. If the SVG has any, the viewer lists them. Optimize strips scripts, event handlers and javascript: URLs unless you turn that option off. It is not a full sanitizer, so if your own site accepts SVG uploads from other people, clean them with a sanitizer such as DOMPurify.
How much smaller does optimizing make an SVG?
It depends on the file. On four real logos we tried, the savings ran from 2% and 3% on two that had clearly been optimized before to 21% and 43% on the others. The viewer shows your file's size before and after, plain and gzipped.
Will optimizing change how my SVG looks?
It shouldn't. The optimizer uses SVGO's default preset, which is designed to keep the picture the same: it removes comments, editor metadata and default values, rounds coordinates to 3 decimal places and shortens path data. It keeps the viewBox and the <title>. Compare the original and optimized previews before you use the file, and turn on Keep ids if CSS or JavaScript outside the SVG refers to its ids.
Why does my SVG look different here than on my website?
The preview loads the SVG as an image, so CSS from your page does not reach it, and images or web fonts it links to do not load. Text set in a font that is not installed on your computer falls back to a default font.