Skip to main content

removeXMLNS

Removes the xmlns attribute from the top-most <svg> element in the document.

It's recommended to use this plugin if you intend to inline SVGs into an HTML document. HTML does not support explicit namespaces, so these are ignored by the browser anyway.

tip

This plugin pairs well with the removeXlink plugin, which drops XLink namespaces and migrates references the modern equivalent, supported by SVG 2 and inline an HTML document. When using removeXMLNS, it's recommended to enable removeXlink too.

caution

This plugin renders SVGs unusable as standalone assets, in HTML <img> elements, or CSS pseudo-elements.

Usage

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

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

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