Inline Styles

Default

Merges styles from <style> elements to the style attribute of matching elements.

Usage

Basic

svgo.config.js

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

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "inlineStyles",
      params: {
        onlyMatchedOnce: true,
        removeMatchedSelectors: true
      }
    }
  ]
}

Parameters

onlyMatchedOnce

If to only inline styles if the selector matches one element.

removeMatchedSelectors

If to remove the selector and styles from the stylesheet while inlining the styles. This does not remove selectors that did not match any elements.

useMqs

An array of media query conditions to use, such as screen. An empty string signifies all selectors outside of a media query.

usePseudos

What pseudo-classes and pseudo-elements to use. An empty string signifies all non-pseudo-classes and non-pseudo-elements.

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

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

Result

Loading...

Implementation

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