Paths are arbitrarly grouped when SVG is imported

lorismat commented 1 year ago

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 1 year ago

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

lorismat commented 1 year ago

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

jpkleemans / vite-svg-loader

Paths are arbitrarly grouped when SVG is imported #74