Skip to main content

convertStyleToAttrs

Converts presentation attributes in element styles to the equvilent XML attribute.

Presentation attributes can be used in both attributes and styles, but in most cases it'll take fewer bytes to use attributes. Consider the following:

<rect width="100" height="100" style="fill:red"/>
<!-- vs -->
<rect width="100" height="100" fill="red"/>

However, because the style attribute doesn't require quotes between values, given enough presentation attributes, it can increase the size of the document:

<rect width="100" height="100" style="fill:red;opacity:.5;stroke-dasharray:1;stroke:blue;stroke-opacity:.5"/>
<!-- vs -->
<rect width="100" height="100" fill="red" opacity=".5" stroke-dasharray="1" stroke="blue" stroke-opacity=".5"/>

Usage

svgo.config.js
module.exports = {
plugins: [
"convertStyleToAttrs"
]
}

Parameters

keepImportant

If to always keep !important styles.

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

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