SVG mapping using XSLFO

Question

The first question is from me; I am currently fixing a graphics rendering service that uses XSLFO to convert our syntax to FO and convert it to PDF at the end.

We used to use PNG graphics from the Internet in exporting PDFs, but this creates really ugly results, so we decided to use SVG for PDFs instead.

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

Here is the syntax before running in XSLFO:

<img src="someimage.svg"> 

And here is the XSLFO that I use:

  <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://')"> <xsl:value-of select="@src"/> </xsl:when> <xsl:when test="starts-with(@src, 'https://')"> <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> 

SVG appears in the PDF file, and it seems to be contained inside the canvas, but for some reason I cannot scale it correctly. It's just real, really huge, and the result is an extremely cropped version of SVG.

I'm running out of sentences here - is there anyone here who has experience?

PS: The image is created using the latest version of Batik, and the width and height are set correctly.

Answer 1

In fact, instream-foreign-object did not seem to be able to scale SVG at all, even with the appropriate canvas set. By setting the correct canvas to SVG, fo: external-graphic performed the trick; -)

Thanks guys for my advice :-) Here's 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://')"> <xsl:value-of select="concat('url(',@src,')')"/> </xsl:when> <xsl:when test="starts-with(@src, 'https://')"> <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> 

Answer 2

It is large because fo: instream-foreign-object has a large width and height; if you are new to XSL-FO, you should try Ecrion Designer - you can edit the XSLFO visualization and resize with the mouse. Hooray!