Add Attributes to Elements

Adds attributes to the outer most <svg> element in the document. This is not an optimization and will increase the size of SVG documents.

danger

This plugin is only safe to use when a map of key/value pairs is passed. If you pass an array of keys to declare empty attributes, this will produce an malformed SVG that's only usable inline an HTML document.

Usage

Basic

svgo.config.js

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

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "addAttributesToSVGElement",
      params: {
        attributes: null
      }
    }
  ]
}

Parameters

attributes

Attributes to add to the <svg> element. If key/value pairs are passed, the attributes and added with the paired value. If an array is passed, attributes are added with no key associated with them.

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

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

Result

Loading...

Implementation

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