使用蜡染从 SVG 到 PNG：多行文本的问题

Question

I am converting an SVG into a PNG image using Batik, but text that goes on mutiple lines is not rendered correctly. It can occur, in a non-deterministic way, that the text itself is not centered anymore on the final image.

As an example, consider this part of the starting SVG:

This is the correct rendering, that I wish to obtain in the PNG too. The resulting PNG, by the way, looks like this:

As you can see, the text into the top green box is not centered anymore.

This is the piece of SVG that define that (suspecting a fonts issue, I have also tried by removing all the font-family="" , with no effect):

  <g transform="translate(184.68 -0.600364)">
     <text fill="rgb(255, 255, 255)" fill-opacity="1" font-family="Kievit Pro" font-size="10px" font-style="normal" font-weight="normal" text-anchor="middle" transform="translate(48 0.429996)">
        <tspan dy="1em" x="0">A simple activity, with</tspan>
        <tspan dy="1.5em" x="0">a text that goes on t</tspan>
     </text>
  </g>

If it could help, this is the code I'm using for the conversion:

static byte[] convertToPng(byte[] byteSvgSmall) throws TranscoderException, IOException {
    if (byteSvgSmall != null) {

        byte[] byteImagePng = null;
        ByteArrayInputStream bais = null;
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        InputStream targetStream = null;

        try {
            targetStream = new ByteArrayInputStream(byteSvgSmall);
            TranscoderInput input = new TranscoderInput(targetStream);

            PNGTranscoder transcoder = new PNGTranscoder();
            transcoder.addTranscodingHint(PNGTranscoder.KEY_WIDTH, new Float(diagramWidthInPixelsForPdf));

            TranscoderOutput output = new TranscoderOutput(baos);
            transcoder.transcode(input, output);

            byte[] byteOutput = baos.toByteArray();
            byteImagePng = new byte[byteOutput.length];
            bais = new ByteArrayInputStream(baos.toByteArray());
            bais.read(byteImagePng);
            targetStream.close();
            baos.flush();
            return byteImagePng;
        } catch (Exception e) {
            BeanFactory
                    .getLogger()
                    .error(SVGTransformer.class,
                            "An error occurred. A null byte[] will be returned",
                            e);
            return null;
        } finally {
            if (bais != null) bais.close();
            if (baos != null) baos.close();
            if (targetStream != null) targetStream.close();
        }
    }
    return null;
}

And then, with the returned byte[]:

if (pngBytes != null) {
   BufferedImage final_img = ImageIO.read(new ByteArrayInputStream(pngBytes));
   File output_file = new File(imagepath);
   ImageIO.write(final_img, "png", output_file);
}

Thank you so much for any insight.

Answer 1

I downloaded your svg and the file (at least on my computer) doesn't quite fit the text within the bounds of the green boxes (there is a bit of overflow, which is clipped). I'm not sure if this is a platform problem since your screen shot shows the text with a bit of margin (whereas in my case, opening with GIMP, the text goes beyond).

As such, I modified your svg such that all the 10px font sizes were reduced to 9px (in order to fit everything in the squares).

I then ran your code with the java-8-openjdk-amd64, the svg provided and the following dependencies:

compile group: 'org.apache.xmlgraphics', name: 'batik-transcoder', version: '1.9.1'
compile group: 'org.apache.xmlgraphics', name: 'xmlgraphics-commons', version: '2.2'
compile group: 'org.apache.xmlgraphics', name: 'batik-codec', version: '1.9.1'

The TEST1 box rendered similar, but not identical, in my png as in yours:

A simple activity, with
  a text that goes on t

I then modified the xml node, changing the second line from "a text that goes on t" to "a text that". This time the second line was centered.

A simple activity, with
     a text that

I then put the original text back in the node and changed the font family for the box to Lucida Sans and size to 7px (my modified node here below).

<text fill="rgb(255, 255, 255)" fill-opacity="1" font-family="Lucida Sans" font-size="7px" font-style="normal" font-weight="normal" text-anchor="middle" transform="translate(48 0.429996)">
    <tspan dy="1em" x="0">A simple activity, with</tspan>
    <tspan dy="1.5em" x="0">a text that goes on t</tspan>
</text>

This time it was centered. What have you tried? What results do you get if you try the above (changing the font-size and/or font-family)? I also used 1000px for the KEY_WIDTH transcoding hint if that might change anything in your case.

Answer 2

After some time, I have finally found the real issue, thanks to a post on this Jira . The trailing and ending whitespaces, into tspans ' text, cause the Batik rasterizer to misinterpret the content.

By scanning the tspan Elements, and setting a trimmed version of the text:

for (int tspanCounter = 0; tspanCounter < tspanList.getLength(); tspanCounter++) {
   Node tspan = tspanList.item(tspanCounter);
   tspan.setTextContent(actParts[tspanCounter].trim());
}

I obtain the correct result. In the images below, you can see the result with and without...the simple trim() call!

Wrong version (whitespaces in the tspan's content)

"Right" version (whitespaces trimmed in the tspan's content)