Free tool

SVG optimizer and viewer

Paste or drop an SVG to view it and shrink it with SVGO, right in your browser. Compare the original and optimized images side by side, see the bytes saved, and copy the result as SVG, a React component, a data URI or a CSS background.

Free · no sign-up · runs in your browser, nothing is uploaded

What the optimizer removes and rewrites

Editors write SVG for themselves, not for the web. An export from Illustrator, Inkscape, Sketch or Figma often carries an XML declaration, a generator comment, <metadata>, editor namespaces, unused gradients, empty groups and numbers with six decimals. SVGO's default preset cleans all of that. The main plugins:

Plugin	What it does
removeEditorsNSData	Drops inkscape:, sodipodi:, sketch: and similar attributes and elements
cleanupIds	Removes unused IDs and shortens the rest (#flameGradient becomes #a)
cleanupNumericValues	Rounds numbers to the chosen precision and drops px and leading zeros
convertPathData	Rewrites path data with relative and shorter commands
convertColors	Turns #FFFFFF into #fff and rgb() into hex
convertShapeToPath	Turns rect, line and polygon into a path when that is shorter
collapseGroups	Removes <g> wrappers that do nothing
mergePaths	Joins neighboring paths with the same styling
inlineStyles / minifyStyles	Moves simple CSS rules onto elements and minifies the rest

Every plugin is a toggle under SVGO options, so if one breaks your file (an animation that targets an ID, for example), turn it off and keep the rest. Multipass runs the plugins again until the output stops shrinking.

Defaults that changed in SVGO 4

SVGO 4 no longer removes viewBox or <title> by default. Without a viewBox an SVG cannot scale, and the title is what screen readers announce. Both are still available as extra plugins here if you really want them. The plugin that removes scripts is now called removeScripts, and it also strips event handler attributes like onclick and javascript: links.

The Inline icon preset adds three extras for SVG pasted straight into HTML or JSX: remove width/height (so CSS sets the size), remove xmlns (not needed inline in HTML) and remove scripts. Do not use it for .svg files loaded with <img>: those need xmlns.

Ways to use the optimized SVG

Output	Best for	Watch out for
.svg file + <img>	Logos and illustrations, cached separately	No CSS color changes from the page; needs xmlns
Inline <svg>	Icons you style with CSS (fill: currentColor)	Repeated on every page; not cached on its own
React component (JSX/TSX)	Icons in a React or Next.js app	Attributes must be camelCase; this tool converts them
Data URI	Small icons in CSS or HTML without a request	# must be encoded as %23; this tool does it
CSS background	Decorative shapes, bullets, patterns	Cannot be recolored with CSS fill

A URL-encoded data URI is usually shorter than Base64 for SVG, because Base64 makes every 3 bytes into 4 characters. Base64 is still the safer choice where a tool or email client mangles % escapes.

<!-- inline, colored by the text color around it -->
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">…</svg>

/* CSS */
.icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f97316'/%3E%3C/svg%3E"); }

Run SVGO from the command line or a build

The same optimizer runs on your machine. The CLI takes files or folders:

npx svgo icon.svg -o icon.min.svg
npx svgo -f ./icons -o ./icons-min      # a whole folder
npx svgo --multipass --precision 2 logo.svg

In Node.js, pass the same options this page uses. A svgo.config.mjs in the project root is picked up by the CLI:

// svgo.config.mjs
export default {
  multipass: true,
  plugins: [
    { name: 'preset-default', params: { overrides: { cleanupIds: false } } },
    'removeDimensions',
  ],
};

// in code
import { optimize } from 'svgo';
const { data } = optimize(svgString, { multipass: true });

In the browser, import optimize from svgo/browser. SVGR, the tool behind most React SVG loaders, runs SVGO too, so check its config if icons lose their viewBox or IDs after a build.

To turn the result into an image, use SVG to PNG. For other code, try the HTML formatter or the image to Base64 converter. More on DevHunt: design tools.

More free developer tools

all tools →

Image converterConvert images between PNG, JPG, WebP and AVIF in your browser, in bulk, with quality control and size comparison.WebP to PNGConvert WebP images to PNG in your browser, in bulk, with transparency kept. Nothing is uploaded.JPG to PNGConvert JPG images to PNG in your browser, in bulk. Nothing is uploaded.PNG to WebPConvert PNG to WebP to shrink images for the web, with a quality slider and the bytes saved.SVG to PNGRender SVG to PNG at any size or scale (1x-4x), with a transparent or colored background.Mermaid live editorWrite Mermaid flowcharts, sequence, ER and Gantt diagrams with a live preview, and export SVG or PNG.

FAQ

How do I reduce the size of an SVG file?+

Paste it above or drop the file. SVGO removes editor metadata, comments and hidden elements, rounds numbers, shortens path data and colors, and merges paths, usually without any visible change. Lower the precision for more savings and check the preview, then copy or download the result.

What does SVGO do?+

SVGO (SVG Optimizer) is an open-source Node.js library and command-line tool. It parses the SVG and runs plugins over it, each one a small safe rewrite: drop the XML declaration, remove unused defs, round numbers, convert shapes to shorter paths and so on. This page runs the official browser build of SVGO 4.

Does optimizing an SVG reduce its quality?+

The default plugins are meant to keep the picture the same. The one setting that can change it is precision: fewer decimals make smaller files, but at 0 or 1 small icons can look wobbly. Compare the original and optimized previews side by side and zoom in before you ship.

Should I remove the viewBox from an SVG?+

Usually not. Without a viewBox the SVG cannot scale to a new width and height; it only crops. SVGO 4 stopped removing it by default for that reason. If you want CSS to size an icon, remove width and height instead and keep the viewBox ("Remove width/height" here).

How do I view an SVG file?+

Drop it on this page. The preview shows it on a checkerboard, light or dark background at fit, 100%, 200% or 400%, with its size, viewBox and an element count. Any web browser also opens .svg files directly.

How do I use an SVG in React?+

Choose JSX or TSX above. You get a component with camelCase attributes (strokeWidth, className), style objects and {...props} on the root, so you can pass width, className or aria-label. Name it in the Name box.

Is it safe to optimize SVG files here?+

Everything runs in your browser and the file is not uploaded. The previews are drawn as images, so scripts in the SVG do not run. For SVGs from users or other untrusted sources, turn on "Remove scripts and event handlers".

Sources: SVGO: introduction · SVGO: preset-default · SVGO: migration from v3 to v4 · MDN: SVG as an image · MDN: data: URLs · SVG 2: viewBox · React: DOM components (attribute names). Checked 2026-10-31.