Vue-svg-loader: SVGs not rendered properly in SSR (nuxt.js)

Created on 17 Oct 2019 · 5Comments · Source: visualfanatic/vue-svg-loader

I have a few svgs that render perfectly when running nuxt.js in dev mode. They look like this:

When built with Nuxt using SSR, they render like this:

What are we doing wrong?

Source

ryanrca

Most helpful comment

I am facing the same issue as well. In my production build style tags are getting stripped from the svg defs. Whereas development builds are working fine.

shivgarg5676 on 21 Nov 2019

👍5 👀3

All 5 comments

Have you found a solution? If no, could you share those SVGs here?

visualfanatic on 6 Nov 2019

I am facing the same issue as well. In my production build style tags are getting stripped from the svg defs. Whereas development builds are working fine.

shivgarg5676 on 21 Nov 2019

👍5 👀3

@shivgarg5676 Did you find a solution? I passing through the same problem. :(

EderOBarreto on 10 Jan 2020

I manually inlined the styles.

alanaasmaa on 10 Jan 2020

It's an issue with SVGO https://github.com/svg/svgo/issues/1077
Try setting options: { svgo: { plugins: [{inlineStyles:{onlyMatchedOnce: false} }] } } or options: { svgo: { plugins: [{minifyStyles:false}] } } to vue-svg-loader and see if that solves the issue

If not and your svg is already optimized (which IMO it should be) you can set options: { svgo: false }