How to Optimise SVG Files for the Web

SVG files exported from design tools like Figma, Adobe Illustrator, or Inkscape are often much larger than they need to be. The extra bytes come from editor metadata, comments, redundant attributes, and unoptimised path data that has no effect on how the SVG looks in a browser.

Optimising your SVGs is one of the easiest performance wins you can get on a web project.

Why SVGs Need Optimisation

When a designer exports an SVG from Figma, the file might include:

• XML comments with layer names and editor version info
• Redundant namespace declarations
• Absolute path coordinates that could be relative (shorter)
• Unnecessary <g> groups with no transform or style
• Default attribute values (fill="black" when black is the default)
• Floating point precision beyond what's visible (e.g., 12.00000001 instead of 12)

None of this affects what you see in the browser, but it all contributes to file size.

Typical savings: 20–80% on freshly exported SVGs from design tools.

The Fastest Method: AnySVG Optimiser

The quickest way to optimise an SVG is to use our free SVG Optimiser:

1. Open the SVG Optimiser
2. Paste your SVG code or upload a .svg file
3. Click "Optimise SVG"
4. See the before/after size comparison
5. Download or copy the optimised code

No installation, no configuration, no account required. Powered by SVGO with sensible defaults.

Using SVGO on the Command Line

For developers who want to optimise SVGs as part of a build pipeline, SVGO is the go-to CLI tool:

# Install globally
npm install -g svgo

# Optimise a single file
svgo logo.svg -o logo.min.svg

# Optimise all SVGs in a directory
svgo -f ./src/assets/icons -o ./dist/assets/icons

# Optimise and overwrite in place
svgo logo.svg

SVGO Configuration

Create an svgo.config.js file to customise the optimisation:

module.exports = {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // Keep viewBox for responsive scaling
          removeViewBox: false,
          // Don't minify IDs — they may be referenced in CSS
          cleanupIds: { remove: false, minify: true },
        },
      },
    },
    'removeDimensions',
  ],
};

Using SVGO in a Node.js Project

import { optimize } from 'svgo';
import fs from 'fs';

const svg = fs.readFileSync('logo.svg', 'utf8');
const result = optimize(svg, {
  multipass: true,
  plugins: ['preset-default'],
});

console.log(`Original: ${svg.length} bytes`);
console.log(`Optimised: ${result.data.length} bytes`);
fs.writeFileSync('logo.min.svg', result.data);

Manual Optimisation Techniques

For when you want fine-grained control:

Remove Editor Metadata

<!-- Remove this entire block — it's Inkscape-specific -->
<sodipodi:namedview ... />
<metadata>...</metadata>

Simplify Path Data

Long paths like:

<path d="M 10.00000001 20.00000001 L 50.00000001 20.00000001"/>

Can be shortened to:

<path d="M10 20h40"/>

Remove Default Attributes

<!-- Before — unnecessary defaults -->
<rect fill="black" stroke="none" opacity="1" x="0" y="0" width="24" height="24"/>

<!-- After -->
<rect width="24" height="24"/>

Use Relative Coordinates

Relative path commands (lowercase letters) are usually shorter than absolute ones:

<!-- Absolute — longer -->
<path d="M10,20 L30,20 L30,40 L10,40 Z"/>

<!-- Relative — shorter -->
<path d="M10,20 h20 v20 h-20 Z"/>

SVG Optimisation in Next.js

If you're using Next.js, consider SVGR which handles optimisation automatically when importing SVGs as React components:

npm install @svgr/webpack

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

Then import SVGs directly:

import Logo from './logo.svg';
// Renders as an optimised React component

Vite Configuration

// vite.config.js
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [svgr()],
});

What Not to Remove

Some SVGO plugins can cause issues. Be careful with:

• removeViewBox — removing the viewBox breaks responsive SVGs. Keep it.
• cleanupIds — if you reference SVG IDs in CSS (e.g., clip paths, filters), don't minify IDs.
• inlineStyles — if your SVG uses <style> blocks with class selectors, check the result.

The preset-default config used by AnySVG's optimiser has safe defaults that avoid these pitfalls.

Measuring the Impact

Before deploying optimised SVGs, verify the output visually. Use our SVG Optimiser to see side-by-side previews of your original and optimised SVGs, so you can confirm they look identical before swapping them in.

Summary

Optimising SVGs is a no-brainer for web performance:

1. Use AnySVG Optimiser for quick, browser-based optimisation
2. Add SVGO to your build pipeline for automated optimisation
3. Review the output visually to confirm no quality loss

A 50KB SVG that could be 10KB is 40KB of bandwidth wasted on every page load. On a site with dozens of SVG icons, the cumulative impact is significant.