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

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

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

Parameters

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

Usage example

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

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

Demo

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" fill="red" /> </svg>{ plugins: [ "addAttributesToSVGElement" ] }<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="20" width="60" height="60" fill="red"/></svg>

Implementation

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