removeComments

Default

Removes XML comments from the document.

XML comments are the content between the <!-- and --> syntax, and do not effect rendering. From an optimization perspective, these can always be safely removed.

By default, this plugin ignores legal comments, also known as "special comments" or "protected comments". These are comments that start with an exclamation point (!) and are often used for legal information like copyright notices, licensing, or attribution.

For example, the following comment can be found in Font Awesome Free icons:

<!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->

Removing a comment like this may be considered a breach of the license terms, as Font Awesome Free is released under CC-BY-4.0 (Creative Commons Attribution), but removing the comment would strip away that attribution.

Legal Comments

It's unclear if there are authoritative resources promoting this syntax for legal comments. However, the convention to preserve them based on this can be seen by a number of minification and build tools:

• clean-css
• CSSO
• esbuild
• Sass
• Terser / terser-webpack-plugin
• UglifyJS
• YUI Compressor

Usage

Basic

svgo.config.js

module.exports = {
  plugins: [
    "removeComments"
  ]
}

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "removeComments",
      params: {
        preservePatterns: ["^!"]
      }
    }
  ]
}

Parameters

preservePatterns

An array of regular expressions (RegExp or string). If the comment matches any of these, including partial matches, the comment is preserved. Set to false to disable this behavior and remove comments indiscriminately.

Demo

Live Editor

const svg = `
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 0  150 100 " width="150">
  <!-- Created with love! -->
  <defs>
    <ellipse cx="50" cy="50.0" rx="50.00" ry="auto" fill="black" id="circle"/>
  </defs>
  <g>
    <use href="#circle" transform="skewX(16)"/>
    <rect id="useless" width="0" height="0" fill="#ff0000"/>
  </g>
</svg>
`;

const svgoConfig = {
  js2svg: { indent: 2, pretty: true },
  plugins: [
    "removeComments"
  ]
}

render(<SvgoPreview svg={svg} svgoConfig={svgoConfig}/>);

Result

Loading...