viewBox stripped from HTML output (nextjs)

[joshuaaron]

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.

[nikola1970]

Same problem for me.

[ljharb]

Sounds like https://github.com/airbnb/babel-plugin-inline-react-svg/issues/107#issuecomment-840413948 is the solution; @joshuaaron, can you confirm this fixes it?

[joshuaaron]

Sounds like #107 (comment) is the solution; @joshuaaron, can you confirm this fixes it?

I went with the latter, and changed "params" => "active" and it seems to work now yes. Big thanks @art-1st

[nikola1970]

@joshuaaron Can you give a bit more explanation? I copied @art-1st code piece and it's not working for me.

[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",

[thinkasany]

Here's how we solved it, and then it worked fine.

 [
      'inline-react-svg',
      {
        svgo: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false,
                },
              },
            },
            'removeDimensions',
            'convertStyleToAttrs',
          ],
        },
      },
    ],

https://github.com/ant-design/ant-design-web3/pull/742