Embed an SVG Editor in Your Web Page

Jeff — Fri, 19 Jun 2009 17:23:12 +0000

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.

Smile Zen Garden?

Jeff — Tue, 20 May 2008 02:49:48 +0000

I’ve been watching David’s FakeSmile script evolve over the course of the last few months. At the same time, I have been reading up on SMIL Timesheets, a recent specification drafted by the SYMM Working Group. With recent support of timesheets in FakeSmile, I thought it would be a good chance to experiment.

Flickr Badges

Flickr is a pretty popular site for sharing photos with friends, family and the world. Flickr even lets you embed ‘badges’ of your recent or popular photos into your own web page using HTML or Flash. Of course the Flash badge has some animation effects that are not easily achievable in HTML. I thought I’d use FakeSmile + SVG to create my own badge. I started with some backend code that Rob has had kicking around in his repository for almost two years.

You can see the results to the right and also on my personal info page. The badge has been tested in Firefox, Opera or Safari. There seems to be some trouble with the Renesis 1.1 plugin for Internet Explorer, so please stay tuned there. The badge can be seen full-browser here (sorry for the low-quality rasters, I’m only grabbing 75×75 pixel thumbnails from Flickr at the moment).

The images are cached from Flickr using a bit of PHP and the Flickr feed is checked every hour for new photos. If you want to see the source of the PHP, please click here.

SMIL Timesheets

Others have started experimenting with FakeSmile, too. Usually the people that I talk to that have used SMIL are pretty delighted with the technology. It’s a shame that it’s not well-supported across modern browsers yet – perhaps it has something to do with the slow public response rate of the SYMM Working Group?

However, while Opera (and now WebKit) have started to support SMIL within SVG, there are no browsers that support SMIL Timesheets yet. So FakeSmile will have to do for now (here’s another alternative that I have not experimented with).

You can think of SMIL Timesheets as the counterpart to CSS for web pages. If stylesheets are like the set decoration of your web page, then timesheets are like the choreography. What’s really nice about this is that you can have a nice, concise bit of markup representing your content (the images, in this case) and then you can externally link to a separate timesheet to animate the web page. You can use CSS selectors to apply animations to any of your web elements and use the same timesheet across multiple pages. You can see my SMIL Timesheet here.

If anyone wants to send me a SMIL timesheet with other cool effects, please feel free (look for my email address here). Perhaps I’ll eventually have my PHP pick a random effect one day.

FakeSmile

The FakeSmile script has come a long way since David released it a few months ago. It implements a decent amount of SMIL and SMIL Timesheets so that you can actually use these technologies now while the browser vendors catch up. David has also recently included a full version of jQuery inside the FakeSmile script, so it’s beefed up with lots of power now. I think he will probably be releasing minimized/compressed versions eventually.

[Update: I should also acknowledge Damian Cugley for being the original inspiration behind Rob starting his project]

CodeDread Blog » jquery

Embed an SVG Editor in Your Web Page

Smile Zen Garden?

Flickr Badges

SMIL Timesheets

FakeSmile