SVGO

SVGO is available through four official interfaces depending on your environment:

• Command-line application: Best for manual optimization or shell scripts. Use svgo --help for documentation.
• Node.js library: Best for integrating SVGO into Node.js-based build tools or backend services.
• Browser bundle: Best for client-side SVG optimization directly in the browser.
• Webpack loader: Best for Webpack-based projects to automatically optimize SVG imports and return them as Data URLs.

The removeRasterImages plugin removes inline raster images (such as JPEGs, PNGs, and GIFs) from an SVG document. This is useful for ensuring an SVG contains only vector data.

// Example configuration in a svgo config file
module.exports = {
  plugins: [
    {
      name: 'removeRasterImages'
    }
  ]
};

The convertOneStopGradients plugin optimizes SVG files by identifying <linearGradient> and <radialGradient> nodes that contain only a single <stop> element. Since a gradient with one stop is effectively a solid color, the plugin replaces the gradient usage with the single color and removes the redundant gradient definition.

When a gradient is converted:

1. The gradient definition is removed.
2. The parent <defs> node is removed if it becomes empty after optimization.
3. The xlink:href namespace is removed if no other elements are using it.

{
  "plugins": [
    "convertOneStopGradients"
  ]
}

The inlineStyles plugin merges CSS declarations from a <style> element directly into the style attribute of the elements they target. This reduces the need for separate style blocks by inlining the styles.

<!-- Before -->
<svg>
  <style>.cls-1 { fill: red; }</style>
  <circle class="cls-1" />
</svg>

<!-- After -->
<svg>
  <circle style="fill: red;" />
</svg>

The removeXMLProcInst plugin removes the XML declaration (e.g., <?xml version="1.0" encoding="UTF-8"?>) from the top of the SVG document.

While the XML declaration is optional in XML 1.0 and its removal generally won't impact compatibility with SVG clients, be aware that some tools might fail to correctly detect the MIME-type as image/svg+xml if the declaration is missing. This plugin is enabled by default in the SVGO default preset.

{
  "plugins": ["removeXMLProcInst"]
}

The cleanupEnableBackground plugin removes the enable-background attribute from SVG elements to improve compatibility, as some browsers do not support it.

Behavior:

• It will not run if the document contains <filter> elements.
• It only affects attribute values and inline styles; it does not modify content within <style> nodes.
• Dropping the attribute: The plugin drops enable-background if its width and height values match the width and height of the <svg> node.
• Replacing the attribute: The plugin replaces the value with new if the width and height values match the width and height of a `` or <pattern> node.

Note: Because some browsers lack support for enable-background, it is generally recommended to avoid this attribute entirely.

SVGO uses a default set of plugins identified by the ID preset-default. This preset is automatically applied when no other plugins are explicitly specified. The plugins in this preset are executed in a specific order to optimize the SVG output.

Note: If you are using SVGO through a wrapper like SVGR, the default plugins might differ from the standard preset-default.

The removeViewBox plugin removes the viewBox attribute from an SVG only when the viewBox values match the document's width and height.

Warning: Using this plugin prevents SVGs from scaling. This means the SVG will not automatically fill its parent container and may be clipped if the container is smaller than the SVG's dimensions. Refer to svg/svgo#1128 for more details on this behavior.

svgo:
  plugins:
    - name: "removeViewBox"

The sortAttrs plugin sorts attributes in all elements within an SVG document. While it does not directly reduce the file size, it improves code readability and can potentially improve the efficiency of compression algorithms (like Gzip) by creating a more predictable attribute order.

By default, attributes are sorted according to a specific predefined order, and any attributes not included in that list are sorted alphabetically.