How to display dynamically generated SVG image

Question

Hello, I need some help on this issue...
I need my page to display programmatically generated SVG image. but if i directly pass SVG string to the page like <h:outputText value="#{MyBean.SVGresult}"/> it will pop up a download dialog box. what should i do to properly include my svg into the page by using embed tag??

Answer 1

The h:graphicImage does not appear to handle svg; maybe it should be extended. I'm still looking for the best way to do it. I don't know if I have the right solution but here is what I have done so far. This will throw up a x, y polyline graph.
Put a panelGrid as place holder in the jsp
      <h:panelGrid  title="Report" style="color=black" border="0" id="dataReports" columns="1" binding="#{dataAnalysis.dataReport}">
      </h:panelGrid>Then take a 'template' svg and fill it in with the dynamic additions and changes in the backing bean. In a submit action
                generateSVGGraph(twothetaArray, intensityArray);
                UIColumn c=new UIColumn();
                HtmlOutputText op=new HtmlOutputText();
                op.getAttributes().put("style","color=black");
                op.setTitle("header text");
                op.setValue("header text");
                c.setHeader(op);
                //c.getFacets().put()
                //c.getChildren().add("<embed src=\"../phase.svg\" align=\"left\" width=\"500\" height=\"500\" type=\"image/svg+xml\"/>");
                //javax.faces.webapp.UIComponentBodyTag embed=new javax.faces.webapp.UIComponentBodyTag();
                //javax.servlet.jsp.tagext.TagAdapter;
                com.hypernex.jsf.ext.html.HtmlEmbedGraphic embedGraphic=new com.hypernex.jsf.ext.html.HtmlEmbedGraphic();
                //embedGraphic.
                embedGraphic.getAttributes().put("src","../session/phase"+phaseGraphCount+".svg");
                embedGraphic.getAttributes().put("align","left");
                embedGraphic.getAttributes().put("width","600");
                embedGraphic.getAttributes().put("height","500");
                embedGraphic.getAttributes().put("type","image/svg+xml");
                c.getChildren().add(embedGraphic);
                 dataReport.getChildren().add(c);
               c=new UIColumn();
                op=new HtmlOutputText();
                op.getAttributes().put("style","color=black");
                op.setTitle("header text");
                op.setValue("header text");
                c.setHeader(op);
                HtmlOutputText out=new HtmlOutputText();
                out.getAttributes().put("style","color=black");
                //out.setTitle("Figure 1.  Powder intensity as dependent on 2&theta;.");
                out.setValue("Figure "+phaseGraphCount+".  Powder intensity as dependent on 2Theta.");
                c.getChildren().add(out);
                dataReport.getChildren().add(c);
...generateSVGGraph
    protected void generateSVGGraph(double[] x, double[] y)
        //FacesContext context = FacesContext.getCurrentInstance();
        //context.
        //Create an svg graph of the equation.
        org.apache.batik.dom.svg.SAXSVGDocumentFactory svgFactory=new org.apache.batik.dom.svg.SAXSVGDocumentFactory("org.apache.xerces.parsers.SAXParser");
           org.apache.batik.dom.svg.SVGDOMImplementation svgDOMImplementation=new org.apache.batik.dom.svg.SVGDOMImplementation();
        org.w3c.dom.DocumentType dt=null;//svgDOMImplementation.createDocumentType("svg","-//W3C//DTD SVG 1.1//EN",f.toURI().toString());
        //System.out.println(dt);
     org.w3c.dom.svg.SVGDocument svgOMDocument=null;
        try
            System.out.println("dir "+(new java.io.File(".")).toURI().toString());
            svgOMDocument=(org.w3c.dom.svg.SVGDocument)svgFactory.createDocument((new java.io.File("../webapps/jsf-wita/siteadmin/templates/graph-template.svg")).toURI().toString(), new java.io.FileInputStream(new java.io.File("../webapps/jsf-wita/siteadmin/templates/graph-template.svg")));//new org.apache.batik.dom.svg.SVGOMDocument(dt, (org.w3c.dom.DOMImplementation)svgDOMImplementation);
            org.w3c.dom.svg.SVGSVGElement root=svgOMDocument.getRootElement();
                    org.apache.batik.dom.svg.SVGOMGElement primary_g=new org.apache.batik.dom.svg.SVGOMGElement("", (org.apache.batik.dom.AbstractDocument)svgOMDocument);
                    primary_g.setAttribute("style","stroke:black; fill:none; stroke-width:1");
                    root.appendChild(primary_g);
                    //double[] x=new double[4*90];
                    //double[] y=new double[x.length];
                    //x[0]=(double)(1)/4.0;
                        //methodArgs[0]=new Double(Math.toRadians(x[0]));
                    //y[0]=((Double)method.invoke(mathmlObject, methodArgs)).doubleValue();
                    double xMin=x[0];
                    double yMin=y[0];
                    double xMax=x[x.length-1];
                    double yMax=xMax;
                    double xOfyMax=yMin;
                    StringBuffer points=new StringBuffer();
                    for(int index=0;index<x.length-1;index++)
                        //System.out.println(x[index]+" "+y[index]);
                        //x[index]=(double)(index+1)/4.0;
                        //methodArgs[0]=new Double(Math.toRadians(x[index]));
                        //y[index]=((Double)method.invoke(mathmlObject, methodArgs)).doubleValue();
                        double cx=x[index];
                        double cy=y[index];
                        //if(xMin>cx)xMin=cx;
                        if(yMin>cy)yMin=cy;
                        //if(xMax<cx)xMax=cx;
                        if(yMax<cy)
                         xOfyMax=cx;
                         yMax=cy;
                    org.w3c.dom.svg.SVGTextElement xLabel=(org.w3c.dom.svg.SVGTextElement)svgOMDocument.getElementById("xLabel");
                    xLabel.getFirstChild().setNodeValue("2?");//?");
                    org.w3c.dom.svg.SVGTextElement xMinimumLabel=(org.w3c.dom.svg.SVGTextElement)svgOMDocument.getElementById("xMinimumLabel");
                    xMinimumLabel.getFirstChild().setNodeValue(ddf.format(xMin,4).toString());
                    org.w3c.dom.svg.SVGTextElement xMaximumLabel=(org.w3c.dom.svg.SVGTextElement)svgOMDocument.getElementById("xMaximumLabel");
                    xMaximumLabel.getFirstChild().setNodeValue(ddf.format(xMax,4).toString());
                    org.w3c.dom.svg.SVGTextElement yMinimumLabel=(org.w3c.dom.svg.SVGTextElement)svgOMDocument.getElementById("yMinimumLabel");
                    yMinimumLabel.getFirstChild().setNodeValue(ddf.format(yMin,4).toString());
                    org.w3c.dom.svg.SVGTextElement yMaximumLabel=(org.w3c.dom.svg.SVGTextElement)svgOMDocument.getElementById("yMaximumLabel");
                    yMaximumLabel.getFirstChild().setNodeValue(ddf.format(yMax,4).toString());
                    for(int index=0;index<x.length-1;index++)
                        points.append((x[index]-xMin)*500/(xMax-xMin));
                        points.append(",");
                        points.append((y[index]-yMin)*500/(yMax-yMin));
                        points.append(" ");
                    //System.out.println(points);
                    org.apache.batik.dom.svg.SVGOMGElement g=new org.apache.batik.dom.svg.SVGOMGElement("", (org.apache.batik.dom.AbstractDocument)svgOMDocument);
                    g.setAttribute("id",(String)"data");
                    g.setAttribute("transform", "translate(100, 550)");
                    g.setAttribute("style","stroke:black; fill:none; stroke-width:1");
                    org.apache.batik.dom.svg.SVGOMPolylineElement polyLine=new org.apache.batik.dom.svg.SVGOMPolylineElement("", (org.apache.batik.dom.AbstractDocument)svgOMDocument);
                    polyLine.setAttribute("fill", "none");
                    polyLine.setAttribute("stroke", "blue");
                    polyLine.setAttribute("transform", "scale(1, -1)");
                    polyLine.setAttribute("stroke-width", "1");
                    polyLine.setAttribute("points", points.toString());
                    g.appendChild(polyLine);
                    primary_g.appendChild(g);
                   javax.xml.transform.TransformerFactory tFactory = javax.xml.transform.TransformerFactory.newInstance();
                   javax.xml.transform.Transformer intermediateTransformer=tFactory.newTransformer(new javax.xml.transform.stream.StreamSource("../webapps/jsf-wita/stylesheets/identity.xsl"));
                                intermediateTransformer.setOutputProperty(OutputKeys.ENCODING, "iso-8859-1");
                                intermediateTransformer.setOutputProperty(OutputKeys.INDENT, "yes");
                     intermediateTransformer.transform(new javax.xml.transform.dom.DOMSource(svgOMDocument), new javax.xml.transform.stream.StreamResult(new java.io.FileOutputStream("../webapps/jsf-wita/session/phase"+phaseGraphCount+".svg")));
        catch(javax.xml.transform.TransformerConfigurationException tce)
            System.out.println("tce err: "+tce.getMessage());
        catch(javax.xml.transform.TransformerException te)
            System.out.println("te err: "+te.getMessage());
        catch(java.io.FileNotFoundException fnfe)
            System.out.println("fnfe:"+fnfe.getMessage());
        catch(java.io.IOException ioe)
            System.out.println("io:"+ioe.getMessage());
    HtmlEmbedGraphic.java
* HtmlEmbedGraphic.java
* Created on May 16, 2004, 8:12 AM
package com.hypernex.jsf.ext.html;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
* @author  hyperdev
public class HtmlEmbedGraphic extends javax.faces.component.UIComponentBase
    /** Creates a new instance of HtmlEmbedGraphic */
    public HtmlEmbedGraphic()
        super();
    public String getFamily()
        return "javax.faces.Data";
    public boolean isRendered()
        return true;
public void encodeBegin(FacesContext context,
  UIComponent component) throws java.io.IOException {
  if ((context == null) || (component == null)){
      System.out.println("encodeBegin NullPointerException "+context);
    throw new NullPointerException();
      System.out.println("encodeBegin "+context+" "+component);
  //MapComponent map=(MapComponent) component;
  ResponseWriter writer = context.getResponseWriter();
  writer.startElement("embed", this);
  writer.writeAttribute("src", getAttributes().get("src"),"id");
public void encodeEnd(FacesContext context) throws java.io.IOException {
  if ((context == null)){
    throw new NullPointerException();
  //MapComponent map = (MapComponent) component;
  ResponseWriter writer = context.getResponseWriter();
  writer.startElement("embed", this);
  writer.writeAttribute("src", getAttributes().get("src"),"id");
  writer.writeAttribute("align", getAttributes().get("align"),"id");
  writer.writeAttribute("width", getAttributes().get("width"),"id");
  writer.writeAttribute("height", getAttributes().get("height"),"id");
  writer.writeAttribute("type", getAttributes().get("type"),"id");
  writer.endElement("embed");
}graph-template.svg - More static parts of the graphic can be put in here.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" width="100%" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 600% 600%" height="100%" preserveAspectRatio="xMidYMid meet" version="1.0">
<g style="stroke:black; fill:none; stroke-width:1">
<g id="visuals" style="stroke:black; fill:none; stroke-width:1" transform="translate(100, 550)">
<rect id="box" transform="scale(1, -1)" x="1" y="1" width="500" height="500" fill="none" stroke="black" stroke-width="1.5"/>
<g id="labels" transform="scale(1, 1)">
<text id="xLabel" x="250" y="50" text-anchor="middle"
        font-family="Verdana" font-size="24" fill="blue" >x label</text>
<text id="xMinimumLabel" x="0" y="20" text-anchor="middle"
        font-family="Verdana" font-size="18" fill="blue" >0.0</text>
<text id="xMaximumLabel" x="500" y="20" text-anchor="middle"
        font-family="Verdana" font-size="18" fill="blue" >100.0</text>
<text id="yMinimumLabel" x="-3" y="-3" text-anchor="end"
        font-family="Verdana" font-size="18" fill="blue" >0.0</text>
<text id="yMaximumLabel" x="-3" y="-500" text-anchor="end"
        font-family="Verdana" font-size="18" fill="blue" >100.0</text>
</g>
</g>
<g id="data" style="stroke:black; fill:none; stroke-width:1" transform="translate(10, 550)">
</g>
</g>
</svg>