How do I manipulate heavy SVG files?
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
6 Replies
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
npm
svgo
Nodejs-based tool for optimizing SVG vector graphics files. Latest version: 3.3.2, last published: 15 days ago. Start using svgo in your project by running
npm i svgo. There are 1791 other projects in the npm registry using svgo.GitHub
GitHub - rtivital/svgo-browser: svgo fork with interface for browse...
svgo fork with interface for browser and additional tweaks for node - rtivital/svgo-browser
An example from vue doc : https://vuejs.org/examples/#svg
Vue.js
Vue.js - The Progressive JavaScript Framework
interesting but the aim is not to create an svg myself, I already have an svg file that I want to manipulate
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.
If you check they just put the SVG into a vue component to interact with it
@Smako what sort of interaction do you want to create ?
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.
LottieFiles
LottieFiles: Download Free lightweight animations for website & apps.
Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!
Other solutions I've tried were "@svgdotjs/svg.js" with "svgPanZoom" and "Konva".
With all of them, I've noticed some problems:
- Konva: Changing the properties of svg elements requires redrawing the entire canvas rendering. Firstly, performance-wise, I don't think it's great (you tell me). Secondly, each time the rendering is redrawn, the position of the rendering (moved with the mouse) is reset.
- @svgdotjs/svg.js: Modifying the properties of svg elements is not a problem. But when using svg.js, the svg element is manipulated directly and rendering jerks.
If you're more comfortable with one of these libraries than I am, I'm all ears. Or any other solution.