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

[RampantDespair]

@gregberge
Correct, but I am using NextJs, so I have followed the tutorial present here https://react-svgr.com/docs/next/ to setup next.config.ts.

import type { NextConfig } from "next";

export default {
  webpack(
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
  ) {
    // https://react-svgr.com/docs/next/
    {
      const fileLoaderRule = config.module.rules.find((rule: any) =>
        rule.test?.test?.(".svg"),
      );

      config.module.rules.push(
        // Reapply the existing rule, but only for svg imports ending in ?url
        {
          ...fileLoaderRule,
          test: /\.svg$/i,
          resourceQuery: /url/, // *.svg?url
        },
        // Convert all other *.svg imports to React components
        {
          test: /\.svg$/i,
          issuer: fileLoaderRule.issuer,
          resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
          use: ["@svgr/webpack"],
        },
      );

      // Modify the file loader rule to ignore *.svg, since we have it handled now.
      fileLoaderRule.exclude = /\.svg$/i;
    }

    return config;
  },
} satisfies NextConfig;

I've also added a svgo.config.mjs file:

/** @type {import("svgo").Config} */
const config = {
  plugins: [
    {
      name: "preset-default",
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
  ],
};

export default config;

But these settings aren't been honored by svgr.
I've also tried .cjs and .js, none worked.

Are config files ignored when running it with NextJs or is my configuration incorrect?

[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

---

Edit in 2025:

It seems the above no longer works with newer versions of the library ("Error: Plugin name should be specified"), and what works for me now is this, in a .svgo.yml file in my project root:

plugins:
  -
    name: preset-default
    params:
      overrides:
        removeViewBox: false

Still no need to add any special configuration in other places, for example in Webpack configuration.

[doctor-kat]

Thanks for updating your answer! This worked for me in @svgr/webpack 8.1.0

[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

[ghost]

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/[email protected],

{
    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

[wonathanjong]

had me banging my head against the keyboard fr

[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

[tremby]

These days just this is working for me, in a .svgo.yml file in my root:

plugins:
  -
    name: preset-default
    params:
      overrides:
        removeViewBox: false