SVG performance optimization for browser

Asked Jul 01 '14 at 09:37

Active Jul 01 '14 at 13:50

Viewed 1,323 times

I am working on a design tool using SVG. Any other vector formats will be converted to SVG and rendered on the browser with svg.js

I started seeing delays while dragging and moving the elements, when the number of elements increased.

Are there any ways in which I can improve the SVG performance on the browser?

Also, I want give user the ability to rotate and scale elements, render clip arts and add text. Will this make the performance worse?

You can see that the drag is pretty slow on that element

edited Jul 01 '14 at 13:50

asked Jul 01 '14 at 09:37

Sreenath Nannat

I qickly tested and using the CSS trick `transform: translatez(0);` you can get some more performance. Don't over do it, that will also hurt you performance. – Nils Jul 02 '14 at 06:40
thank you, Nils. I will definitely try that out. – Sreenath Nannat Jul 02 '14 at 06:50
This has been addressed in svg.js draggable plugin [issue list](https://github.com/wout/svg.draggable.js/issues/10) – Sreenath Nannat Jul 07 '14 at 06:48

0 Answers0