Disable stripping viewBox

[tremby]

I must be looking in all the wrong places; sorry if so.

How can I disable stripping the viewBox attribute from SVGs?

Relatedly, is there a way to add a viewBox if it doesn't already exist? (i.e. turn width="w" height="h" into width="w" height="h" viewBox="0 0 w h")

[gregberge]

• Removing viewBox is relative to SVGO, so please refer to it and tricks config
• Adding viewBox is not possible, you have to write a h2x plugin to do it

[sonaye]

// in .svgrrc.js
module.exports = {
  svgoConfig: {
    plugins: {
      removeViewBox: false
    }
  }
};

[tremby]

Thanks, that got me on the right lines. That didn't work for me (I may have made a typo) but I saw in the options I can do a YAML file instead. I ended up writing a file .svgo.yml with the following contents:

plugins:
  - removeViewBox: false

[kaievns]

is there a way to specify this option with @svgr/webpack loader?

[kaievns]

okay, if anyone runs into the same thing. i've managed to make it work with webpack config like so:

     {
        test: /(icons|images)\/.*?.svg$/,
        use: [{
          loader: '@svgr/webpack',
          options: {
            svgoConfig: {
              plugins: {
                removeViewBox: false
              }
            }
          }
        }, 'file-loader']
      }```

[tremby]

Any idea if there's a way to do that in a `require` statement, i.e. with no special Webpack configuration?

[hubgit]

If you're configuring/disabling several svgo plugins, remember that they each have to be in a separate object:

svgoConfig: {
      multipass: true,
      plugins: [
        {
          cleanupIDs: {
            prefix: `svg-${componentName.toLowerCase()}-`,
          },
        },
        {
          removeViewBox: false,
        }
      ],
    },

[vlinder]

Any idea if there's a way to do that in a require statement, i.e. with no special Webpack configuration?

Keeping the viewBox attribute really should be the default..

[gregberge]

@vlinder you should submit a PR to SVGO.

[kvedantmahajan]

The SVGO option in .svgrrc didn't work for me.
However, SVGR CLI has an option to preserve the viewBox attribute by passing in --icon flag.

Example

npx @svgr/cli --icon -d src/icons svg-icons --ext tsx

[zhe-zhao]

Thanks, that got me on the right lines. That didn't work for me (I may have made a typo) but I saw in the options I can do a YAML file instead. I ended up writing a file .svgo.yml with the following contents:

plugins:
  - removeViewBox: false

Saved my day. .svgrrc didn't work for me since in my case the issue was in the rollup bundle plugin. Adding a .svgorc config fixed it.

[TemVin]

if use rollup.config, you can create .svgarc file
inside indicate:
plugins: {
removeViewBox: false
}

[cellininicholas]

This is what worked for me:
https://stackoverflow.com/a/70360615/1110814

use: {
   loader: '@svgr/webpack',
   options: {
      svgoConfig: {
         plugins: [{
            name: 'removeViewBox',
            active: false
         }]
      }
   }
}

[Rhut-virani]

This doesnt work anymore it seems the same StackOverflow has a newer working solution

[santhosh-umapathi-appymango]

The SVGO option in .svgrrc didn't work for me. However, SVGR CLI has an option to preserve the viewBox attribute by passing in --icon flag.

Example

npx @svgr/cli --icon -d src/icons svg-icons --ext tsx

This worked like charm, thanks for this answer.

[andyhmltn]

For anyone like me that was using @svgr/rollup and struggling to get any of the examples provided to work, this is what did the trick in the end:

svgr({
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false,
                },
              },
            },
          ],
        },
      })

[saltire]

This worked for me with @svgr/webpack; I think the accepted answer overrides the entire plugin array, which has other side effects like not removing fill color.

[harisonfa]

I'm using next-svgr which uses svgr under the hood. And what worked for me was creating a .svgrrc.js file with the following configurations.

// in .svgrrc.js
module.exports = {
    icon: true,
    noRemoveViewBox: true,
};

[Holybasil]

for nextjs14 && @svgr/webpack@8.1.0,

{
    test: /\.svg$/i,
    issuer: fileLoaderRule.issuer,
    resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
    use: [
        {
            loader: "@svgr/webpack",
            options: {
                svgoConfig: {
                    plugins: [
                        {
                             name: "preset-default",
                             params: {
                                 overrides: {
                                     removeViewBox: false,
                                 },
                            },
                        },
                    ],
                 },
             },
         },
    ],
},

[WesleyKapow]

OMG TY!! Why was this so hard and not the default!?

[LiamWinterton]

This had got me screaming at the monitor. Why this isn't the default behaviour I can't fathom. And to make it this obscure to change? With 0 documentation? Urgh

[Natsunokazeme]

very good solution, gave me happy life

[aquinq]

If you want to keep it all inside the vite config

import { defineConfig } from 'vite';
import svgr from '@svgr/rollup';

export default defineConfig({
  plugins: [
    svgr({
      svgoConfig: {
        plugins: [
          {
            name: 'preset-default',
            params: {
              overrides: {
                removeViewBox: false,
              },
            },
          },
        ],
      },
    }),
  ],
});

[mrdulin]

"@svgr/cli": "^8.1.0"

The .svgrrc.yaml should be specify a plugin name for svgo

jsxRuntime: automatic
filenameCase: kebab
titleProp: true
svgProps:
  viewBox: 0 0 24 24
  width: 24
  height: 24
svgoConfig:
    plugins:
      -
        name: preset-default
        params:
          overrides:
            removeViewBox: false