Displaying SVG using XSLFO

Question

Hi, StackOverflow,

First question from me; I'm currently fixing a graphing service that uses XSLFO to convert our syntax to FO, and converting it to PDF in the end.

Previously we've been using PNG graphs from the web in the PDF exports, but this creates really ugly results, so we've decided to go with SVG for PDF instead.

However, the SVG doesn't seem to scale into the SVG canvas properly.

Here is the syntax before run into XSLFO:

<img src="someimage.svg">

And here is the XSLFO I'm using:

   <xsl:template match="img">
      <fo:block space-after="12pt">
          <fo:instream-foreign-object width="20cm" height="15cm" content-width="scale-to-fit" content-height="scale-to-fit" scaling="uniform" background-color="#cccccc">
          <svg:svg x="0" y="0" width="100" height="100" viewBox="0 0 100 100">
                <svg:image x="0" y="0" width="100" height="100">
                    <xsl:if test="@src">
                       <xsl:attribute name="xlink:href">
                          <xsl:choose>
                             <xsl:when test="starts-with(@src, 'http://')"&gt;
                                <xsl:value-of select="@src"/>
                             </xsl:when>
                             <xsl:when test="starts-with(@src, 'https://')"&gt;
                                <xsl:value-of select="@src"/>
                             </xsl:when>
                             <xsl:otherwise>
                                <xsl:value-of select="concat($baseurl, @src)"/>
                             </xsl:otherwise>
                          </xsl:choose>
                       </xsl:attribute>
                    </xsl:if>
                   </svg:image>
            </svg:svg>
         </fo:instream-foreign-object>
      </fo:block>
   </xsl:template>

The SVG does appear in the PDF, and it does seem contained within the canvas - but for whatever reason I cannot get it to scale properly. It's just really, really huge, and the result being an extremely cropped version of the SVG.

I'm running out of suggestions here - is there anyone here that has experience with this?

PS: The image is created using the newest version of Batik, and the width and height is set properly.

Answer 1

SVG can be inserted in xsl-fo via instream-foreign-objects. Some xsl-fo engine supports direct way but not all of them. As far as i know xml2pdf does support.

Answer 2

It is large because the fo:instream-foreign-object has a large width and height; if you are a beginner in XSL-FO you should try the Ecrion Designer - you can edit XSLFO visually and resize using the mouse. Cheers!

Answer 3

Actually, instream-foreign-object didn't seem to be able to scale the SVG at all, not even with the proper canvas set. By setting the correct canvas on the SVG, fo:external-graphic did the trick ;-)

Thanks you guys for giving me your tips :-) Here is what worked:

    <fo:external-graphic content-width="25cm" content-height="16cm">
        <xsl:if test="@src">
            <xsl:attribute name="src">
                <xsl:choose>
                    <xsl:when test="starts-with(@src, 'http://')"&gt;
                        <xsl:value-of select="concat('url(',@src,')')"/>
                    </xsl:when>
                    <xsl:when test="starts-with(@src, 'https://')"&gt;
                        <xsl:value-of select="concat('url(',@src,')')"/>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:value-of select="concat('url(',$baseurl, @src,')') + ')'"/>
                    </xsl:otherwise>
                </xsl:choose>
            </xsl:attribute>
        </xsl:if>
    </fo:external-graphic>