How do I manipulate heavy SVG files?

[lusty dagger]

Hello everyone,
I'm looking for a library that can be used with Nuxt/Vue to manipulate rather large and complex .svg files (typically an electrical circuit svg, like this one https://shorturl.at/MHQ09).

The aim would be to be able to :

• Manipulate elements of an existing SVG (change properties: colors, stroke, fill, etc.)
• Zoom in/out
• Move the SVG view in a draggable way.
  What do you recommend?

Thanks for your help

[crisp atlas]

for the server side you can use https://www.npmjs.com/package/svgo

I haven't tried this one but it says it works in the browser
https://github.com/rtivital/svgo-browser

[finite current]

An example from vue doc : https://vuejs.org/examples/#svg

[lusty dagger]

interesting but the aim is not to create an svg myself, I already have an svg file that I want to manipulate

[lusty dagger]

yes, I've tried "svgo" but I'm having performance problems. Their optimization solution with the "svgo" command doesn't change much and risks deleting elements in the svg.

[finite current]

If you check they just put the SVG into a vue component to interact with it

@lusty dagger what sort of interaction do you want to create ?

[crisp atlas]

It depends on what you are trying to do. You can also import svgo into your code and customize the behavior. Also take a look at https://lottiefiles.com.