removeXlink

Removes XLink namespace prefixes and converts references to XLink attributes to the native SVG equivalent by performing the following operations:

• Convert *:href to href.
• Convert *:show to target.
• Convert *:title to <title>.
• Drop all other references to the XLink namespace.
• Remove XLink namespace declarations.

tip

When using this plugin, it's recommended to put it toward the end of your pipeline. Other SVGO plugins may add the XLink namespace, and these won't be migrated if they're added after this plugin has already executed.

In most cases this will remove all references to XLink, but if legacy elements that are deprecated or removed in SVG 2 are found, the references are preserved as those elements do not support the SVG 2 href attribute. You can set includeLegacy to true to apply the plugin in this case too.

The following support xlink:href but not the SVG 2 href attribute:

• <cursor>
• <filter>
• <font-face-uri>
• <glyphRef>
• <tref>

It's recommended to use this plugin if you intend to inline SVGs into an HTML document, includeLegacy can be safely set to true in this case too. HTML does not support explicit namespaces, so namespace prefixes are ignored by the browser anyway.

danger

This replaces XLink with features that are only supported in the SVGO 2 spec, so breaks compatibility with the SVG 1.1.

Usage

Basic

svgo.config.js

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

Parameters

svgo.config.js

module.exports = {
  plugins: [
    {
      name: "removeXlink",
      params: {
        includeLegacy: false
      }
    }
  ]
}

Parameters

includeLegacy

If to update references to XLink in elements that don't support the SVG 2 href attribute, like <filter> and <tref>.

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

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

Result

Loading...