inlineStyles

Default

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

Usage

Basic
Parameters

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

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