Why I am stupid and why Apache Batik and SVG rules

I’ve become fan of Apache Batik and SVG after having spent some time playing around with it and realizing that I can replace lots of our sucky custom code with Apache Batik and get a standards based workflow for image processing.

What makes SVG cool?

SVG used to be just another unnecessary standard that I would not use in real life. That was untill I really got fed up with a pile of unnecessary complex pile of bitmap image-processing code that we used to construct images from common elements and user data. Writing Java2D-code and wiring together code that combines existing icons and images, scales images and exports them to the filesystem was fun, but the everything was custom code and for every new image both java code and configuration had to be created. It did the work, but to be honest it sucked – a lot.

Enter SVG. SVG images are vector images that can combine also bitmap images into them – and are formatted as XML-documents that are easy to parse and modify serverside. Using your understanding and skills of xml processing and css you can quite easily build transformation pipeline that takes templates prepared in Illustrator, combines other images with them and styles everything with CSS. Changing an element or attributes in SVG DOM-tree is easier than… well.. almost any other choice.

Toolchain

So to get up and running with SVG you need proper tools. In our case toolchain consists of following element:

  • Adobe Illustrator – for designers who create templates
  • Inkscape – for tuning SVG images
  • Apache Batik – for transformation and testing

Illustrator is non brainer. By far the best vector graphics too for designers, and it outputs also SVG nicely. Schweet!

Once you have the SVG you need to tune it up a little. For that purpose any etxteditor and tool like Inkscape is good. In tuning phase usually coder goes through the SVG image and makes sure elements that need to be transformed are properly names, adds missing id attributes, adds fonts and sets up a stylesheet(s). At this stage Batik also comes into picture as it is used to transform SVG-images into bitmap images also in serverside.

Running: java -jar batik-rasterizer.jar /home/huima/workspace/odiapi/api-graphics/src/main/resources/avatartemplates/avatarinfotemplate.svg

Batik rasterizer transforms avatarinfotemplate.svg into PNG and allows programmer to check that everything looks ok and to test different stylesheets and combinations without running unitttests or building the whole software. After setting everything up and testing how different bits and pieces work, working with SVG becomes easy. And suddenly you don’t want to do any more custom image processing code as you can do a lot of cool image construction and composition easily in SVG.

http://xmlgraphics.apache.org/batik/

http://wiki.apache.org/xmlgraphics-batik/ChangeCss

So for future reference, if you are in need of setting up image processing framework and transform or create image composites, then check out Apache Batik. It might be a solution.

This entry was posted in java, programming, technology. Bookmark the permalink.

Yksi vastaus artikkeliin: Why I am stupid and why Apache Batik and SVG rules

  1. daviding sanoo:

    I’m a fan of SVG, but haven’t used it as much in practice as I would like, because I couldn’t be guaranteed that SVG would be properly rendered on every browser.

    As an alternative to Adobe Illustrator, I’ve been successful in using OpenOffice Draw to create vector drawings, and then hacking the code so that it would be accepted by Inkscape. Going from Inkscape back to OO Draw had been fruitless … but I haven’t tried in about a year.

    This (limited) success to date has led me to do many more drawings in OO Draw — than the traditional boxes and lines that I would typically do in Powerpoint — for the possibility of portability. I would like to be able to create drawings that not only work in presentations, but also on the web.

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s