SVG in Vaadin


I recently built an add-on called SvgComponent that displays SVG images. Alone that isn’t that big deal, Embedded does too. The big thing is that it also provides a fallback with a project called Svgweb for those damn IE browsers. Svgweb renders SVG with some javascript and flash magic on IE6,7 and 8 too.

I have read that for the next version IE team will add SVG support, so one can be quite confident that SVG is finally going to be the vector graphic format for the web. I have been a big fun of SVG for a decade, so I’m very happy for its success. It is a versatile and simple format, simple enough to the raw xml instead of using any special graphics library. Although Adobe’s browser plugin was quite powerful a long time ago, at some point it looked like the technology might even fade away.

When IE9 is out and popular enough I’d bet that we’ll start using SVG more and more. In themes and even when building UI widgets. Until that it is already a valid option as a graphic presentation format that can be spiced with animations and user interactions.

One essential tool for Java developers, when utilizing SVG is Batik (apache project). With it one can make pretty much all current Java2d based graphics to SVG. I have previously used it in JFreeChart Wrapper for Vaadin to make sharp graphics, even when printed. To demonstrate possibilities of SvgCompont I built two examples using Batik. One those simply draws some lines with java2d api. It is an example stolen from Sun’s tutorial . Another makes an SVG presentation of a graph built with JUNG library. I think someone was asking for a Vaadin integration of JUNG a while ago so I decided to try that.

Check them out from
. They aren’t meant to give you a special wow effect, but the demonstrate what could be done with SVG today. Sources can be found in svn. In addition to adapt raw SVG in you apps, my examples might inspire you to transfer your existing graphics from you old desktop Java apps to your brand new Vaadin apps - with a relatively small effort.

Related links (sorry about format, Liferay’s forum editor does not work properly with my Safari):
(SVG component in Directory)
(Batik homepage)
(Some examples of using SVG with Vaadin)


Cool stuff. You know my use case:


Load initial SVG
User clicks on something
A new SVG gets loaded (preferably animate between the images)
(repeat from 2)

[/list] (btw: the links in your original post now work)