Remove ViewBox

Default

Removes the viewBox attribute where it matches the documents width and height.

danger

This plugin prevents SVGs from scaling, so they will not fill their parent container, or may clip if the container is too small.

Some external tools that use SVGO have also been found to override the default preset to disable this plugin by default, including Docusaurus and SVGR.

See svg/svgo#1128 for more context.

Usage

svgo.config.js

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

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

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

Result

Loading...

Implementation

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