Authoring, tooling and optimising SVG files

Clean up design-tool output, configure SVGO for a real project, keep the viewBox honest, and decide between a font, a sprite and inline markup.

What a design tool actually exports

<!-- Typical editor output. Everything here is a problem. -->
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Some Tool 4.2.1 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="24px" height="24px" viewBox="0 0 24 24" version="1.1" id="Layer_1"
     xml:space="preserve" style="enable-background:new 0 0 24 24;">
  <style type="text/css">
    .st0{fill:#4A5568;}
    .st1{fill:none;stroke:#4A5568;stroke-width:2;}
  </style>
  <g id="Group_7" transform="translate(0.5,0.5)">
    <rect x="2" y="2" width="20" height="20" class="st0"/>
    <path class="st1" d="M6 12h12"/>
  </g>
</svg>

<!-- What you want to ship -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"
     fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
  <rect x="2" y="2" width="20" height="20"/>
  <path d="M6 12h12"/>
</svg>

SVGO with a deliberate configuration

npm install --save-dev svgo

# Inspect before you commit to a config
npx svgo --show-plugins
npx svgo --config svgo.config.mjs icon.svg -o icon.min.svg

# Batch a folder
npx svgo -f src/icons -o dist/icons --recursive

// svgo.config.mjs — a configuration for icon files
export default {
  multipass: true,                     // run the plugin chain until it settles
  js2svg: { indent: 0, pretty: false },

  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // Keep ids: they are referenced by gradients, clipPaths and masks.
          cleanupIds: false,
          // Do not collapse groups blindly: some carry transforms you rely on.
          collapseGroups: false,
          // Round to two decimals: visually identical, fewer bytes.
          cleanupNumericValues: { floatPrecision: 2 },
          // Keep the viewBox. Without it the icon cannot scale.
          removeViewBox: false,
          // Convert shapes to paths only when it is safe.
          convertShapeToPath: { convertArcs: true }
        }
      }
    },
    // Remove editor metadata
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'removeDimensions',                // drop width/height, keep viewBox
    {
      name: 'addAttributesToSVGElement',
      params: {
        attributes: [{ 'aria-hidden': 'true' }, { focusable: 'false' }]
      }
    }
  ]
};

• removeViewBox must stay off. Removing it produces a file that cannot be scaled, which is the single most common SVGO mistake.
• cleanupIds renames ids and can break references if a plugin is not aware of them. Keeping ids is safer for anything using gradients, masks or <use>.
• multipass: true produces smaller output than a single pass because optimizing a path can enable a later optimization.
• removeDimensions drops width and height so the icon fills its container — which is what you want for a sprite or a CSS-styled icon, and wrong for a fixed-size decorative image.

Font, sprite or inline

<!-- The three shapes of the same decision -->

<!-- 1. Inline: the icon is styleable and animateable -->
<button class="btn">
  <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
    <path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Add item
</button>

<!-- 2. Image: fixed, decorative, cacheable -->
<img src="/icons/logo.svg" alt="" width="120" height="32">

<!-- 3. Sprite reference: one cached file, many icons -->
<svg width="16" height="16" aria-hidden="true">
  <use href="/icons/sprite.svg#plus"></use>
</svg>

The practical default for most projects: inline the handful of icons whose colour or size changes with context, put everything else in a sprite or an <img>, and skip icon fonts unless the icon set is large, monochrome and static.

FAQ

Related

Symbol sprites, icon systems and reuse Shapes and coordinates

Last refreshed 2026-09-18.