removeUnknownsAndDefaults

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

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

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 attributes, used for accessibility. This excludes role, which is managed with the keepRoleAttr parameter.

keepRoleAttr

If to keep the ARIA role attribute.

Demo

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}/>);