Kirill Grouchnikov's Blog

SVG and Java UIs part 3: using Batik for asynchronously-loading UIs

This entry is the third part in the ongoing series about using SVG-based icons in Swing-based applications.

• The first part outlined the need for using scalable icons in next-generation Java UIs and proposed using SVG images as a possible format, showing the ribbon component which employs heavy icon rescaling.
• The second entry introduced an SVG file previewer based on the breadcrumb bar component, a ribbon button from the ribbon component and SVG Salamander renderer

Those with time on their hands who downloaded all the necessary jars to run the SVG file previewer, may have noticed that the underlying SVG renderer is not quite mature. It crashes on quite some few icons from the Tango project (sometimes outputting messages to System.err) and completely bombs on the Nuvola icon set and other GNOME icons (available for download right here). In addition, when you open a folder with 100+ icons you can go and grab a cookie - the SVG files are loaded synchronously. The same would go for the dynamic icon resizing. While the second issue can be addressed using custom threads in your application, the first issue can be addressed only by the project developers (relevant issues were filed).

What about Apache Batik SVG renderer? It has some clear advantages and a few disadvantages. First of all, it has much better support for various SVG files - all the files in Tango were rendered successfully. However, a significant portion of GNOME icons (in almost all bundled schemes, especially Nuvola and Amaranth) either failed to render (in the bundled Swing demo application as well) or rendered in incorrect size.

One very big advantage of Batik is the JSVGCanvas Swing component that loads SVG files asynchronously and allows registering lifecycle listeners - one of them will be called when the SVG tree has been completed (at this point you can layout and render the specific icon). The result (see the WebStart link and video below) is that the application comes up much quicker, getting populated with the icons as they are loaded, while still remaining responsive. The same goes for icon resizing. There are some problems with this component as well. The major one - for every canvas instance, a new thread is created (bug report). If you preview a folder with a few hundred files you will have OutOfMemory exception - it would be nice to have some sort of control over the pool size and thread reusage. Another problem (quite minor one) is that it doesn't respect the opacity setting (bug report) - this can be dealt with by setting the background color to 0x0. The main advantage of SVG Salamander over Batik in Swing support - the lack of Icon-implementing class in Batik (bug report). You have to either have the JComponent-extending JSVGCanvas or copy-paste its implementation and have the custom Icon implementation.

The additional advantage of SVG Salamander over Batik is the bundle download size and complexity. Salamander has one 320 KB jar, while Batik comes with 20 jars totalling to 4.3 MB (what's the deal with using Xerces - SAX and DOM from JDK are not good?). This may be a major factor for applications with small core footprint and for secure WebStart applications when you'll have to sign and publish 20 additional jars. However, Batik's SVG support is much better than Salamander.

Both toolkits are very similar in the time it takes to load all SVGs in the same folder. However, Batik is a clear winner here due to the out-of-the-box asynchronous loading.

The screenshot below shows the GNOME Lush icon set under Metal look-and-feel (as requested by one of the commenters):

To launch the test ribbon application using Batik renderer, click on the image below - note how the icons are shown and resized asynchronously leaving the UI responsive. You can play with the icon sizes by resizing the window. You can play with various themes / watermarks by going to the "Look & Feel" task.

To launch the SVG file viewer using Batik renderer, click on the image below - note how the icons are shown and resized asynchronously leaving the UI responsive. Play with the slider to resize all currently shown icons. Note that this application is signed since (obviously) it requires access to the local disk. If you don't want to run it, download and watch the video link below.

In case you don't want / can't run the WebStart demoes or download the stuff from the projects pages, this video (1.3MB, 0:35 min, original WMV format renamed to AVI) shows the SVG file previewer with various animation effects (from the Substance look-and-feel) and responsive UI thanks to Batik.

As i mentioned in the first part, Batik has much steeper learning curve - it took about three times as much as with Salamander to integrate with Flamingo components. Luckily the VMA awards was on in the background - did anyone notice that Lil Kim looks frighteningly similar to the pregnant Leah Rimini? But i digress. Note that the license for Flamingo remains BSD - the Batik and Salamander integrations are done in the test branch for the test applications. The next series installment (tomorrow) will show and compare the implementation details using Batik and Salamander.

And one last thing - crashing the award show, especially when the last award is given is indeed uncool. And Sarah Silverman still is the best comedienne around.

Comments

• Nice, but shame the screenshots are spoiled by poor/no text anti-aliasing. In fact the svg rendering looks to be fairly poor on the ant-aliasing too. Is that a batik thing? the previous screen shots looked better.

  Posted by: goron on September 01, 2006 at 01:54 AM

• Nitpicking again, but why does the title bar in substance look and feel have the light coming from the top, but other things like buttons, taking the light from the bottom?

  Posted by: goron on September 01, 2006 at 01:59 AM

• Goron, these are different SVGs than in the other screenshots. The previous ones were from Tango and this is from GNOME. And about the substance gradients - this is the way it is :)

  Posted by: kirillcool on September 01, 2006 at 08:16 AM

• Kirill, this is very cool!!!

  I downloaed some of the nuvola icons but most of them don't seem to render.

  The icons do look great, I wish Swing had some Icon support for SVG images, it'd be nice to use these transparently with bitmap based icons.

  One weird thing is that in the demo, some of the icons are cropped at certain sizes like this:

  http://img171.imageshack.us/img171/3134/svgiconskm8.png
  

  Posted by: augusto on September 01, 2006 at 04:54 PM

• augusto,
  Note the following line in the posting: However, a significant portion of GNOME icons (in almost all bundled schemes, especially Nuvola and Amaranth) either failed to render (in the bundled Swing demo application as well) or rendered in incorrect size. - this was for Batik. The same happens in the Swing viewer bundled with Batik, so it should be something in their code.

  Posted by: kirillcool on September 01, 2006 at 05:12 PM

• Whoops, my bad for reading too fast. I thought you were talking about the SVG Salamander renderer when you wrote that.

  Anyways, looks really good, and I'm thinking of trying to of these SVG renderers to play with some icons for a regular JToolbar. Icon is a pretty generic interface in swing so it shouldn't be that hard to do it.

  I also wonder if something like Batik is smart enough to render the vectors once to a buffer and not redraw them as long as they don't change size ...

  Posted by: augusto on September 01, 2006 at 05:22 PM

• augusto,
  This is what i saw in Batik's Swing components. As long as you don't change the rendering transformation, the JGVTComponent uses the same BufferedImage that was created during the GVT rendering pass. I may be wrong, but i debugged it a few times while trying to see the correct usage of this component and that's what i saw.

  Posted by: kirillcool on September 01, 2006 at 05:27 PM

This work is licensed under a Creative Commons License.