removeUnknownsAndDefaults

Default

Removes unknown elements and attributes, as well as attributes that are set to their default value.

This can also remove defaults from the XML declaration if present in the document, namely standalone if it's set to no.

Usage

Basic

svgo.config.js

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

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "removeUnknownsAndDefaults",
      params: {
        unknownContent: true,
        unknownAttrs: true,
        defaultAttrs: true,
        defaultMarkupDeclarations: true,
        uselessOverrides: true,
        keepDataAttrs: true,
        keepAriaAttrs: true,
        keepRoleAttr: false
      }
    }
  ]
}

Parameters

unknownContent

If to remove elements that are not known or can't be the child of its parent element.

unknownAttrs

If to remove attributes that are not assignable to the respective element.

defaultAttrs

If to remove attributes that are assigned their default value anyway.

defaultMarkupDeclarations

If to remove XML declarations that are assigned their default value. XML declarations are the properties in the <?xml … ?> block at the top of the document.

uselessOverrides

If to remove attributes that are being if the same value is being inherited by it's parent element anyway.

keepDataAttrs

If to keep data-* attributes. Set to false to remove data attributes.

keepAriaAttrs

If to keep ARIA (Accessible Rich Internet Applications) attributes, used for accessibility. This excludes role, which is managed with the keepRoleAttr parameter.

keepRoleAttr

If to keep the ARIA role attribute.

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

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

Result

Loading...