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