Convert Style to Attributes

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

Basic

svgo.config.js

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

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "convertStyleToAttrs",
      params: {
        keepImportant: false
      }
    }
  ]
}

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...

Implementation

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