Creating dynamic watermarks with SVG

My customer wanted to show a watermark which should be dynamically created based on the data (xml) which was processed with xslt. The end result is a nicely styled html page. (see image below).


In order to achieve this result I automatically pulled out my SVG knowledge which would allow me to create images dynamically. Since not all browsers are able to render SVG i used Cocoon's batik block to serialize the svg image to png.

I'll shortly show that this can be easily accomplished with Apache Cocoon 2.2.

First make sure you add following dependencies to your block:




Next in line you will need to create some SVG template for your watermark:


A next step is writing some flowscript function which sets the jx transformer context:


We also need to make some sitemap adjustments:



And finally i need to add the background image dynamically based on content within my stylesheets:



And to finalize the positioning etc i made some css adjustments: