Remove Hidden Elements

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 <rect> elements where height is 0.

patternWidth0

Removes <pattern> elements where width is 0.

patternHeight0

Removes <pattern> elements where height is 0.

imageWidth0

Removes <image> elements where width is 0.

imageHeight0

Removes <image> elements where height is 0.

pathEmptyD

Remove <path> elements where d is not set or empty. Does not apply for single point paths associated with a marker.

polylineEmptyPoints

Removes <polyline> elements with no points defined.

polygonEmptyPoints

Removes <polygon> elements with no 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...

Implementation

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