An embeddable SVG editor

[Patrick de Castro Neuhaus]

Hey guys,

I am looking for an equivalent of a WYSIWYG editor (e.g. Froala, Summernote), but for SVG images.

Something like a Node package I can add to my project. I need to enable users to edit SVG images in my app.

Anyone knows something like that?

In case it doesn't exist.... I was wondering whether it would be possible to develop one based on Snap...

Any thoughts on that?

Thanks!

[Ian]

There is svgedit, but that could be overkill for you needs.

[Patrick de Castro Neuhaus]

Thanks for the reply. I checked out SVG-edit, but it's really an overkill. I'm thinking about developing a simple solution with Snap, but don't know yet how to approach this... e.g. How to connect mouse movements with Snap functions in a proper way etc.

[Ian]

If you roll your own solution with Snap, there's a couple of bits that could help I did...

http://svg.dabbles.info/snaptut-freetransform-viewbox (view source) & http://svg.dabbles.info/snaptut-freetransform-vb3.js

http://svg.dabbles.info/snaptut-loadselect-move (click run, then drag the birds eyes or whatever)

And there's a conversion of the Raphael freetransform plugin at https://github.com/ibrierley/Snap.svg.FreeTransform (demo at http://svg.dabbles.info/Snap.svg.FreeTransform/ )

The difficulty is always integrating this stuff into a proper solution that matches your needs, but some of the above may help if you need to get your head around transformations, drags etc.

[Patrick de Castro Neuhaus]

Thank you very much! I added FreeTransform to the project and it looks like the right path to follow, but I still need to better understand how it works and plan my approach, though.
I believe you are the person I just wrote an email to (the author of FreeTransform, right?). Let's continue this conversation there :)