Getting started with SVG graphics objects in JSF 2.0 pages

Question

What I want to do is create web pages with interactive SVG content. I had this working as a Java desktop application using Batik to render my SVG and collect UI events like mouseclick. Now I want to use those SVG graphics files in my JSF (Primefaces) web application in the same way.

Trying to get started, I found this didn't work:

<h:graphicImage id="gloob" value="images/sprinkverks.svg" alt="Graphic Goes Here"/>

I don't mind doing some reading to get up the learning curve. It was just a bit surprising that some google searches didn't turn up anything useful.

What I did find suggested that I would have to do this with the f:verbatim tag as if I were hand-coding the HTML. I would then have to add some script to capture the SVG events and feed them back into the AJAX code. If I have to do all that I will, but I was hoping there would be an easier and automated way.

So the questions are:

1. How to get the image to render in the first place?
2. How to get the DOM events from the SVG portion of the page back to the backing beans?

Much thanks for any pointers.

Answer 1

How to get the image to render in the first place?

The <h:graphicImage> just renders a HTML <img> element. This doesn't work for SVG objects in current browsers. You need <object type="image/svg+xml">. Since JSF 1.2, there's no need for the <f:verbatim> ugliness. On Facelets you can just inline EL in plain HTML like so:

<object type="image/svg+xml" data="#{bean.svgUrl}">

The standard JSF implementation however doesn't offer an UI component which renders an <object>, so you have got to do it the plain vanilla HTML way. I've checked at PrimeFaces, OpenFaces and RichFaces, but no one offer a component yet which is targeted on embedding SVG objects. PrimeFaces has a <p:media> and RichFaces an <a4j:mediaOutput> for movie objects, but that's it.

---

How to get the DOM events from the SVG portion of the page back to the backing beans?

Your best bet is to write some JavaScript which delegates to a hidden JSF ajax form. Write the necessary data to the hidden fields and trigger the <f:ajax> change or action. You can find a similar example in this answer.

Answer 2

You could try some kind of mix between ItsNat and JSF, for instance using an iframe to contain ItsNat generated markup containing SVG. ItsNat provides many options to integrate SVG in web applications, pure SVG or SVG inline in HTML, including SVG events and Batik (by the way SVG events in Batik applet are going to be fixed in ItsNat 1.1).

Idea: use a session attribute to share a bridge object between JSF and ItsNat