Vue-svg-loader: Some SVG are empty after 0.5.0 release

[egorzekov]

Hello @visualfanatic.

First of all, thanks a lot for your work on this package. As for Junior Developer, I just can't describe how I like the easiness of using SVG in my Vue project using vue-svg-loader.

Unfortunately, after I updated all packages in my project, your loader stops working properly for some SVG. Actual result: some SVG are just empty. I downgraded the package to 0.3.0 - and it works again.

There were no errors in the console, so I'm not able to provide you some additional information. But please note SVG code I'm having the issue with (they worked on 0.3.0 but failed on 0.5.0):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 95.549 95.549" version="1.1" viewBox="0 0 95.549 95.549" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
    <path d="m88.543 17.948c-3.02 0-5.591 1.924-6.573 4.607l-13.799 1.777c-1.286-1.54-3.218-2.522-5.376-2.522-3.861 0-7.006 3.144-7.006 7.006 0 1.562 0.521 3.001 1.389 4.168l-10.193 22.929c-0.655 0.072-1.283 0.237-1.872 0.479l-8.328-8.042c0.117-0.507 0.185-1.031 0.185-1.573 0-3.862-3.144-7.005-7.006-7.005s-7.005 3.143-7.005 7.005c0 0.712 0.108 1.399 0.307 2.048l-14.308 15.047c-0.621-0.182-1.274-0.283-1.952-0.283-3.862-1e-3 -7.006 3.144-7.006 7.005 0 3.863 3.144 7.007 7.006 7.007s7.005-3.144 7.005-7.007c0-0.801-0.142-1.567-0.391-2.284l14.152-14.884c0.69 0.229 1.426 0.356 2.191 0.356 0.934 0 1.824-0.188 2.64-0.521l8.344 8.057c-0.113 0.5-0.179 1.018-0.179 1.551 0 3.862 3.144 7.006 7.006 7.006s7.005-3.144 7.005-7.006c0-1.783-0.676-3.408-1.777-4.646l9.962-22.41c3.154-0.076 5.792-2.243 6.585-5.167l13.241-1.705c1.267 1.821 3.371 3.019 5.753 3.019 3.861 0 7.006-3.143 7.006-7.005s-3.145-7.007-7.006-7.007z"/>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg width="169.68px" height="169.68px" enable-background="new 0 0 169.676 169.676" version="1.1" viewBox="0 0 169.676 169.676" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
        <path d="m80.668 53.92c-4.303 0-7.336 0.383-8.981 0.758v28.582c2.027 0.63 4.427 0.758 7.591 0.758 11.633 0 18.713-5.815 18.713-15.679-1e-3 -9.487-6.582-14.419-17.323-14.419z"/>
        <path d="m84.841 2e-3c-46.851 0-84.841 37.98-84.841 84.833 0 46.854 37.99 84.839 84.841 84.839 46.846 0 84.835-37.985 84.835-84.839 0-46.848-37.989-84.833-84.835-84.833zm21.363 86.919c-6.314 6.198-15.924 9.236-26.927 9.236-2.912 0-5.444-0.126-7.591-0.63v32.25h-15.431v-84.103c5.693-1.013 13.406-1.773 23.786-1.773 11.369 0 19.592 2.403 25.034 6.954 5.05 4.177 8.345 10.876 8.345 18.843 4e-3 8.095-2.53 14.678-7.216 19.223z"/>
</svg>

The following SVG works both for 0.3.0 and 0.5.0:

xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <svg enable-background="new 0 0 483.013 483.013" version="1.1" viewBox="0 0 483.013 483.013" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"> <path d="m477.04 219.2l-98.468-170.53c-7.974-13.802-22.683-22.292-38.607-22.292h-196.93c-15.923 0-30.628 8.49-38.608 22.292l-98.462 170.53c-7.961 13.801-7.961 30.785 0 44.588l98.462 170.54c7.98 13.802 22.685 22.293 38.608 22.293h196.93c15.925 0 30.634-8.491 38.607-22.293l98.469-170.54c7.96-13.803 7.96-30.787 0-44.588z"/> </svg>

[visualfanatic]

Hi! 👋 Thank you for the kind words! Could you share your webpack config? I created a test project using vue-cli, added vue-svg-loader and those both SVGs are working. The v0.5.0 is using upgraded svgo package, so it's my first idea why those files are causing some problems.

[egorzekov]

Thanks for such rapid reply.

I performed a deeper investigation and found out the following things. Before sharing you SVG code that stopped working, I compressed it using some site (the first link in Google). I've just tried compressed variant - and it works.

Comparing it to my initial variant (that used to work on 0.3.0), I found out that setting up width\height in

Could you please check my old variant if it works for you?

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="95.549px" height="95.549px" viewBox="0 0 95.549 95.549" style="enable-background:new 0 0 95.549 95.549;"
     xml:space="preserve">
<g>
    <path d="M88.543,17.948c-3.02,0-5.591,1.924-6.573,4.607l-13.799,1.777c-1.286-1.54-3.218-2.522-5.376-2.522
        c-3.861,0-7.006,3.144-7.006,7.006c0,1.562,0.521,3.001,1.389,4.168L46.985,55.913c-0.655,0.072-1.283,0.237-1.872,0.479
        l-8.328-8.042c0.117-0.507,0.185-1.031,0.185-1.573c0-3.862-3.144-7.005-7.006-7.005s-7.005,3.143-7.005,7.005
        c0,0.712,0.108,1.399,0.307,2.048L8.958,63.872c-0.621-0.182-1.274-0.283-1.952-0.283C3.144,63.588,0,66.733,0,70.594
        c0,3.863,3.144,7.007,7.006,7.007c3.862,0,7.005-3.144,7.005-7.007c0-0.801-0.142-1.567-0.391-2.284l14.152-14.884
        c0.69,0.229,1.426,0.356,2.191,0.356c0.934,0,1.824-0.188,2.64-0.521l8.344,8.057c-0.113,0.5-0.179,1.018-0.179,1.551
        c0,3.862,3.144,7.006,7.006,7.006s7.005-3.144,7.005-7.006c0-1.783-0.676-3.408-1.777-4.646l9.962-22.41
        c3.154-0.076,5.792-2.243,6.585-5.167l13.241-1.705c1.267,1.821,3.371,3.019,5.753,3.019c3.861,0,7.006-3.143,7.006-7.005
        C95.549,21.093,92.404,17.948,88.543,17.948z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

Thanks in advance.

[visualfanatic]

Same result unfortunately, could you create a test project using vue-cli with this config and tell me if the SVG shows up?

[egorzekov]

Hello @visualfanatic.

I've spent a couple of hours today trying to understand the root cause and find a way to reproduce it on a clean project. Luсkily, it seems that I've finally got it.

I created a repo for you with all necessary details and comments. Please take a look at App.vue file - there're detailed comments about the issue in styles section.

In a nutshell, the issue seems to be the following:
0.3.0 - setting up width/height both in SVG and styles attached via class(or anything else) _won't break anything_.
0.5.0 - setting up width/height both in SVG and styles attached via class(or anything else) _won't work_. You should use either the first or the second approach.

Thanks a lot and looking forward to your feedback!

[visualfanatic]

@egorzekov Thank you for creating the repo! I've managed to find the solution to this issue, to fix the issue disable the removeViewBox rule, like so:

{
  test: /\.svg$/,
  use: {
    loader: "vue-svg-loader",
    options: {
      svgo: {
        plugins: [
          { removeViewBox: false },
        ]
      }
    }
  }
}

This rule was disabled by default before the v1.0 release, I'll make sure to put this tip in the upcoming readme update.

[egorzekov]

@visualfanatic thank you!

It was a real pleasure for me to communicate with you!

Have a great weekend!

P.S. Please let me know if I can remove my test repo.

[visualfanatic]

@egorzekov I am super glad that we managed to find a solution! Sorry for the delayed response from my side. You can safely remove the test repo, it was really helpful!

[egorzekov]

No problem, thank you too =)

[hmaesta]

Hello.

Today is my first day with Vue, please be patient.

My .svg files are having the viewBox removed. How can I add the removeViewBox: false to vue-cli config?

I am using:

module.exports = {
    chainWebpack: (config) => {
        const svgRule = config.module.rule('svg');
        svgRule.uses.clear();
        svgRule.use('vue-svg-loader').loader('vue-svg-loader');
    }
}

Thank you for the plugin (and support).

[visualfanatic]

You can use webpack-chain method: options

svgRule
  .use('vue-svg-loader')
  .loader('vue-svg-loader')
  .options({
    svgo: {
      removeViewBox: false,
    },
  });

[hmaesta]

You forgot plugins:[]. Now it's working fine 😃

svgo: {
    plugins: [
        { removeViewBox: false },
    ]
},

Thank you!