removeHiddenElems

Default

Remove hidden or invisible elements from the document. This can be elements with 0 width and height defined, or elements that were just hidden with CSS.

This plugin ignores non-rendering elements, such as <clipPath> and <linearGradient>, which still apply regardless of styles, unless they are unused.

Refer to the parameters for the conditions this plugin looks for. All checks enabled by default.

Usage

Basic

svgo.config.js

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

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "removeHiddenElems",
      params: {
        isHidden: true,
        displayNone: true,
        opacity0: true,
        circleR0: true,
        ellipseRX0: true,
        ellipseRY0: true,
        rectWidth0: true,
        rectHeight0: true,
        patternWidth0: true,
        patternHeight0: true,
        imageWidth0: true,
        imageHeight0: true,
        pathEmptyD: true,
        polylineEmptyPoints: true,
        polygonEmptyPoints: true
      }
    }
  ]
}

Parameters

isHidden

Removes elements where visibility is hidden, unless a child element has visibility set to visible.

displayNone

Removes elements where display is none.

opacity0

Removes element where opacity is 0.

circleR0

Removes <circle> elements with a radius of 0.

ellipseRX0

Removes <ellipse> elements where rx is 0.

ellipseRY0

Removes <ellipse> elements where ry is 0.

rectWidth0

Removes <rect> elements where width is 0.

rectHeight0

Removes height is 0.

patternWidth0

Removes width is 0.

patternHeight0

Removes height is 0.

imageWidth0

Removes width is 0.

imageHeight0

Removes height is 0.

pathEmptyD

Remove marker.

polylineEmptyPoints

Removes points defined.

polygonEmptyPoints

Removes points defined.

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

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

Result

Loading...