I'm looking for a modern open-source tool, that provide web-based interface to create diagrams. Diagram editor implemented with drag&drop.
- viewer & editor interface,
- editor should implement drag&drop interface,
- shapes should implement states and allow to attach behavior to it - like run/stop animation or change color on state change,
- shapes should provide interface to attach custom user data, like another tag attribute and set it's value,
- import new SVG-shapes made with popular editors like Inkscape, CorelDRAW etc. This is the major requirement!
And I'm stuck with importing custom SVG shapes. The problem is mxGraph uses it's own XML-like format and provide very basic SVG->XML converter. This converter support very limited list of SVG tags.
For example it can't convert Lamp symbol from Wikipedia properly, nor my own Inkscape sketches: https://commons.wikimedia.org/wiki/File:Lamp_symbol.svg
Besides, despite the fact mxGraph's implementation level is very high, it would be better to have a tool that based on something more present day and popular like node.js or something. But it's just an opinion, not a requirement.
I have same problem with pretty new and shiny draw2d library from FreeGroup: https://github.com/freegroup/draw2d_js.shapes
It uses Raphael.js, so I've tried to use several SVG->Raphael.js converters, but faced exactly the same problem.
So I'm looking for a tool that can use present days SVGs. Or a proper SVG->mxGraph/raphaeljs/draw2d converter.
UPD1: I had an idea to check: Simple SVG easy to convert. So I've found several SVG optimizators/concatenators at github.com: https://github.com/svg/svgo https://github.com/LinePod/SvgConverter https://github.com/icons8/svg-simplify https://github.com/perplexed/SVGsimplify
Non of them made SVG, that could be easily converted to mxGraph/Draw2d.
UPD2 I've tried fabric.js for the same purpose. It can easily use and animate simple SVGs. It can use complex SVG. But animation available only for single-color SVG. By default fabric.js doesn't work with 'filter' tag from 'defs' section which implements all animation in my case.