removeViewBox

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.

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