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.
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.
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.