In my spare time I've been having fun contributing to the SVG-edit project this last couple weeks adding really basic features like selection and dragging. The goal is a cross-browser SVG editor that you can embed in web pages that works on any modern browser. My biased definition of a modern browser: native support of SVG. I know there are quite a lot of projects out there that do an online SVG editor already. SVG-edit is still in its infancy, but that's part of the charm I found in hacking on it.
One of the nice things about hosting it on Google Code is that you can rig the Subversion repositories to serve the proper MIME types of the files in question. This means we can have Google Code host the editor and just iframe it into our pages.
For instance, using:
<iframe src="http://svg-edit.googlecode.com/svn/tags/stable/editor/svg-editor.html" width="750" height="600"/>
here is the latest stable version of the svg-editor sitting in my blog:
You can view source, I ain't lying. The nice thing about this link is, when I wrote this blog entry, the above iframe included SVG-edit 2.1, but when 2.2 is released my web page will automatically include it. This keeps you on the latest release but does not expose you to the potentially unstable trunk.
If you prefer to host it yourself, download svg-edit or check out the source code. Eventually we'll host this on PlanetSVG as well - that's the proper place for it in my opinion.
And there's ongoing work by Vidar to turn this into a Google Wave Gadget for collaborative sketching, which would be awesome.
Anyway, if anyone wants to get this working on a legacy operating system with a legacy browser and a legacy plugin your patches would be really appreciated (modern plugins or shims would also be good). Note that it programmatically creates the SVG element inside the HTML and uses jQuery so this might be a challenge. I'd still like to see it happen though! π
You can discuss SVG-edit here and report issues here.
Nice piece of work! But how do i make a stroke solid back again or disable it?
Shift-click on a color in the palette below the canvas to change the stroke color (the red X is no stroke). We need to make this clearer, I agree.
Wow, that’s really cool. It is easier to use than Inkscape IMO.
@Phil: That’s because it lacks 95% of the functionality of Inkscape π
Nice use of data: url for saving the file. Overall, good ease of use, including z-ordering.
@Kirby – thanks! I’ve added some essential features to the trunk for v2.2: undo/redo, multiselection, resize elements. We also stretched the UI to fit the full frame now. It’s getting slower though so time for an optimization sprint π
Very very cool! I love the iframe bit…saves from having to remember to DL, extract, etc every time there is a new version. :-).
—
Brie
This is fantastic. What I am wondering is whether you have considered allowing importing of SVGs from file – like the embed link functionality.
We have an online image library which currently contains about 1000 SVG illustrations (and we currently have about 1500 more to upload) and I am looking for a way to allow users to combine these illustrations in their browser. Ideally I love to be able to provide something resembling the Adobe Illustrator symbol palette functionality with your editor by linking to the SVGs in our image library.
@Adrian: We are actually working on importing SVG for the next version of SVG-edit (codenamed Bicorn). A first release of this functionality will probably just be ‘select the file you want to import’, but that will over time be improved.
I just found your 2.5 pre-alpha. This looks great, although I am wondering if you are considering adding the ability to “import” more than one image onto the canvas, rather than “opening”, which starts a new canvas? If you could incorporate that, then perhaps I could interact with the import feature and load my illustrations via a series of palettes containing my illustrations.
@Adrian: Yes, importing an arbitrary number of SVG images into your current existing drawing is what I’m talking about. Please follow:
Sorry Jeff, I didn’t refresh this window before making my last post. I am going to read those issue posts and leave some thoughts there.
Hello. Cool software!
I have small question… once i have svg-edit embedded in iframe, can i send svg code to this iframe using javascript from parent site? can i obtain edited svg code back when i will need it?
thanks ;o)
Harvie: There are a variety of options.
You can initialize the SVG document by supplying it in the URL as an argument, but wouldn’t be able to get it out of the iframe.
I think you probably need to use an approach similar to what other wiki/cms folk are doing with SVG-edit: Embed the editor directly in the page in a div and then use SvgCanvas.setSvgString() and provide your own save handler. Here’s a good example.
Please join the mailing list and we can give you further details.
Jeff: thanks for the tip!
i’ve also found this:
http://svg-edit.googlecode.com/svn/tags/stable/editor/embedapi.js
this should do the thing, but i can’t get it to work…
maybe i will really need to embed whole editor π
there should be some more simple way…
Jeff: I’ve been sneaking around a while and i’ve found that possible problem is in embedapi.js and btw it’s possible to get data from/to iframe or popup using messages…
the bug is described here (last comment):
http://code.google.com/p/svg-edit/issues/detail?id=494
Thanks for your help
I have created PoC SVG-Edit DokuWiki plugin:
http://www.dokuwiki.org/plugin:svg_edit
http://www.youtube.com/watch?v=M-QW6a1ZFHA