Search code examples
jsfjsf-2.2omnifaces

How can I embed an SVG image using JSF/OmniFaces/PrimeFaces?


Here's what I'm trying to do:

  1. I have a @ViewScoped JSF bean in which I call a JAX-RS service using Jersey.
  2. The resource I'm requesting returns a response with content-type image/svg+xml.
  3. Display it in a Facelet page.

My research so far has lead me to believe:

  • h:graphicImage (Core JSF) does not support SVG
  • p:graphicImage (PrimeFaces) does not support SVG
  • o:graphicImage (OmniFaces) does not support SVG either.

Is there no way to deliver an SVG image to a facelets page from a backing bean? The service that serves the SVG images will be extended later to support delivering (among other formats) PNG but I was hoping to utilize the SVG directly.


Solution

  • The <o:graphicImage> sets a default content type of image, but your browser apparently didn't swallow that for SVG images. As per this commit, I've for OmniFaces 2.1 added SVG support for <o:graphicImage dataURI="true"> and I've added a new type attribute which allows you to explicitly specify the image type via file extension:

    <o:graphicImage value="#{bean.image}" type="svg" />
    

    In case it throws an IllegalArgumentException like this one

    java.lang.IllegalArgumentException: o:graphicImage 'type' attribute must represent a valid file extension. Encountered an invalid value of 'svg'.

    Then it means that your server doesn't recognize it as a registered mime mapping. You should then add a new mime mapping to server's or webapp's web.xml as below:

    <mime-mapping>
        <extension>svg</extension>
        <mime-type>image/svg+xml</mime-type>
    </mime-mapping>