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.