Remove Useless Stroke and Fill

Default

Removes useless stroke and fill attributes.

Assigning these attributes can sometimes change nothing in the document. For example, in most cases assigning a stroke color is redundant if the elements stroke-width or stroke-opacity is 0.

Usage

Basic

svgo.config.js

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

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "removeUselessStrokeAndFill",
      params: {
        stroke: true,
        fill: true,
        removeNone: false
      }
    }
  ]
}

Parameters

stroke

If to remove redundant strokes.

fill

If to remove redundant fills.

removeNone

If to remove elements where both the fill and stroke attributes are none.

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: [
    "removeUselessStrokeAndFill"
  ]
}

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

Result

Loading...

Implementation

• https://github.com/svg/svgo/blob/main/plugins/removeUselessStrokeAndFill.js