jpkleemans/vite-svg-loader

Paths are arbitrarly grouped when SVG is imported

Closed this issue · 2 comments

lorismat commented

Hi Team!

Thanks a lot for the amazing work, very useful vite plugin.

I noticed that when imported, some of my svg paths were grouped. One of my initial svg is made of one group of 22 paths. Once loaded with the svgLoader(), the svg element becomes a group of 10 paths, some of them being merged arbitrarily. Is it on purpose, or a bug or a feature that I can change?

Not a big deal of course, but keeping distinct path can be useful when animating the svg.

Versions:

"dependencies": {
    "animejs": "^3.2.1",
    "vue": "^3.2.41"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "vite": "^3.2.0",
    "vite-svg-loader": "^3.6.0"
  }

Attached are the initial svg (top) and the svg with grouped paths on the page (bottom). Thanks again!
initial
post-import-grouped

jpkleemans commented

Hi Loris, could you try if the issue is still there if you turn off SVGO? See https://github.com/jpkleemans/vite-svg-loader#disable-svgo

  • 👍1
  • 🎉1
lorismat commented

Awesome, that was the reason. I didn't pay attention to this part. Thanks again for the great work!!