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
- Basic
- Parameters
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 the parent element according.
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.keepAriaAttrs
If to keep ARIA (Accessible Rich Internet Applications) attributes, used for accessibility. This excludes
role
, which is managed with thekeepRoleAttr
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}/>);