xmlsvgxslt

How to embed svg image in a XML file and transform it into HTML

I'm using an XML file to store some generated data and plots. The plots are svg images and I would like to use a XSLT to transform the XML file to an HTML with the SVG plots embedded inline. Is it possible?

<Root>
  <Data ... />
  <Data ... />
  <Plot><svg>....</svg><Plot>
  <Data ... />
</Root>

I tried with:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html>
      <head>
        ...
      </head>
      <body>
        <div><xsl:for-each select="//Data"><xsl:value-of select="Something" />...</xsl:for-each></div>
        <div><xsl:for-each select="//Plot"><xsl:value-of select="." /></xsl:for-each></div>
        ...

I embedded the SVG plot into the XML surrounded by a <Plot></Plot> and used an XSLT to get the <Plot> and place the SVG content into an HTML structure.

The final result should be an HTML file that can be opened offline.

  <html>
      <head>
        ...
      </head>
      <body>
        <div>Some data...</div>
        <div><svg>... svg plot ...</svg></div>
...
Solution

  • Try <xsl:copy-of> in place of <xsl:value-of>. The copy-of instruction copies a node tree; the value-of instruction turns it into flat text, discarding the markup.