Getting started with SVG graphics on JSF 2.0 pages

Question

I want to create web pages with interactive SVG content. It worked for me as a Java application, using Batik to render SVG and collect user interfaces like mouseclick. Now I want to use these SVG image files in my JSF (Primefaces) web application in the same way.

Trying to get started, I found that this did not work:

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

I do not mind doing reading to get up from the learning curve. It was a little surprising that some of Google’s searches didn’t show anything useful.

What I found suggested that I would have to do this with the f: verbatim tag, as if I manually encoded the HTML. Then I have to add some script to capture the SVG events and return them back to the AJAX code. If I have to do whatever I want, but I was hoping there would be a simpler and more automated way.

So the questions are:

• How to get an image for rendering in the first place?
• How to return DOM events from SVG page of a page back to beans backup?

Thanks so much for any pointers.

Answer 1

How to get an image for rendering in the first place?

<h:graphicImage> just displays the HTML <img> element. This does not work for SVG objects in current browsers. You need <object type="image/svg+xml"> . Since JSF 1.2, it is not necessary for <f:verbatim> deformities. On Facelets, you can simply paste EL into regular HTML as follows:

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

the standard JSF implementation , however, does not offer a user interface component that displays <object> , so you should do this in a simple vanilla HTML way. I checked on PrimeFaces , OpenFaces and RichFaces , but no one has yet proposed a component that is designed to embed SVG objects. PrimeFaces has <p:media> and RichFaces a <a4j:mediaOutput> for movie objects, but that is.

---

How to get DOM events from part of an SVG page back to the beans background?

It is best to write JavaScript that delegates the hidden ajax JSF form. Write the required data in hidden fields and invoke the change or action <f:ajax> . You can find a similar example in this answer .

Answer 2

You can try some kind of mix between ItsNat and JSF, for example, using an iframe to contain the MyNat label generated by it containing SVG. ItsNat provides many opportunities for integrating SVG in web applications, pure SVG or SVG embedded in HTML, including SVG events and Batik (by the way, SVG events in batik-appending will be fixed in ItNat 1.1).

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