viewBox stripped from HTML output (nextjs)

Recently noticed the viewBox attribute has been stripped from our rendered SVG elements. I’ve attempted to use the plugins option inside the svgo property as plugins: [{ "removeViewBox": false }] but it throws an error on compilation for ‘Plugin name should be specified’ so I believe this setup should work?

Currently using

"babel-plugin-inline-react-svg": "2.0.1",
"next": "10.2.0",

.babelrc:

plugins: [
    [
        'inline-react-svg',
        {
            svgo: {
                plugins: [
                    {
                        name: 'removeViewBox',
                        params: false,
                    }
                ],
            },
        },
    ],
    ['styled-components', { ssr: true }],
],

svg element:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.557 15.556" width="15.557" height="15.556">
    ..
</svg>

output:

<svg xmlns="http://www.w3.org/2000/svg" width="15.557" height="15.556">
    ..
</svg>

[art-1st]

I have same issues during bump up some libraries. so i just downgrade babel-plugin-inline-react-svg version ^1.1.2. it work normally.

or if you want using latest version, change attribute name params to active https://github.com/svg/svgo/releases/tag/v2.0.0

"plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "name": "removeViewBox",
              "active": false
            }
          ]
        }
      }
    ],
}

then will work fine.

[joshuaaron]

@nikola1970 I didn’t really change much, outside the params property from my original answer, if it helps, my .babelrc looks like this:

{
    "presets": ["next/babel"],
    "plugins": [
        ["inline-react-svg", { "svgo": { "plugins": [ {
            "name": "removeViewBox",
            "active": false
        }]}}],
        [ "styled-components", { "ssr": true }]
    ],
    "env": {
        "production": {
            "plugins": ["babel-plugin-jsx-remove-data-test-id"]
        }
    }
}

Now when I view my SVGs in the browser, the viewBox is being rendered correctly. Still using

"babel-plugin-inline-react-svg": "2.0.1",
"next": "10.2.0",