Vue-svg-loader: Removes viewbox

[RainArro]

Before vue-svg-loader my svg looks like this.

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

When i include it as a vue component it removes viebox. I can not scale my svg without viewbox.

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

[FistMeNaruto]

Remove the width and height attributes and svgo will stop removing viewBox, or add the option object to your rule config:

config.module.rules.push({
  test: /\.svg$/,
  loader: "vue-svg-loader",
  options: {
    svgo: {
      plugins: [{ removeDimensions: true }, { removeViewBox: false }]
    }
  }
});

[visualfanatic]

@RainArro have you checked @FistMeNaruto solution? Just disable the removeViewBox SVGO plugin and you should be fine.

[RainArro]

Thank you :)

[nicooprat]

Usage with Vue CLI:

...
.loader('vue-svg-loader')
.options({
  svgo: {
    plugins: [{ removeDimensions: true }, { removeViewBox: false }]
  }
})
...

Complete list of SVGO options.

[KaliaJS]

Why the choice to remove the viewBox if it's present ?

[lights0123]

@KaliaJS it reduces size by a view bytes, which is the point of SVGO.