Question

I have a JSF 2 application which creates some SVG content. How can i embed it in the output HTML?

The generated SVG looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; stroke:black; text-rendering:auto; stroke-linecap:square; stroke-miterlimit:10; stroke-opacity:1; shape-rendering:auto; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:&apos;Dialog&apos;; font-style:normal; stroke-linejoin:miter; font-size:12; stroke-dashoffset:0; image-rendering:auto;" xmlns="http://www.w3.org/2000/svg">
  <!--Generated by the Batik Graphics2D SVG Generator-->
  <defs id="genericDefs"/>
  <g/>
</svg>

I want this output directly in the rendered HTML page. I don’t want to use the <object> tag, because i want to be able to manipulate the svg content on the client via javascript.

The result should look like this:

<div id="svgcontent">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 50" id="myDIVBG">
    <defs>
    [...]
  </svg>
</div>

The above is correctly displayed in my browser, I just cant get the XML into the HTML without the XML string being escaped.

Answer 1

I’ve never used JSF, but searching for “JSF disable escaping” turned up this:

<h:outputText value="???" escape="false" />