SVG to PNG text not showing properly - Arial font

StackOverflow https://stackoverflow.com/questions/17993130

  •  04-06-2022
  •  | 
  •  

Question

I'm having an issue of converted PNG using Apache Batik is different when there is a text with different font-family, like Arial. The issue occurs in the environment where Cent OS 6 running Tomcat 7 and Java 6.

The Java code used to convert SVG to PNG is :

// Convert the SVG image to png and send back
PNGTranscoder transcoder = new PNGTranscoder();
// 
TranscoderInput input = new TranscoderInput(new ByteArrayInputStream(svgImage));
outStream = new ByteArrayOutputStream();
TranscoderOutput output = new TranscoderOutput(outStream);

// Transcode the given SVG
transcoder.transcode(input, output);

outStream.flush();

pngImage = outStream.toByteArray();

The SVG file I am going to convert to PNG is :

<svg version="1.1" x="0" y="0" id="hjtqebzv1" width="610" height="240" xmlns="http://www.w3.org/2000/svg" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="LFFFFFF0" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:0.8"/>
      <stop offset="100%" style="stop-color:#FAFAFA;stop-opacity:1"/>
    </linearGradient>
  </defs>
  <g id="hjtqebzv-o1" transform="translate(5,5)">
      <rect x="1" y="1" width="578" height="20" fill="url(#LFFFFFF0)" stroke="#5e5ca7" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>
      <text x="1" y="1" width="578" height="19" >
        <tspan x="2" y="14" style="font-family:Arial;font-size:12px;fill:#000000;">This is a test text for testing text overlapping in the rectangle when convert the svg to PNG using SVG-Batik</tspan>
      </text>
  </g>
</svg>

When I open the SVG file in Firefox browser it displays properly as given in the below image : enter image description here

But when I convert the SVG using Apache Batik, the converted image looks different. The Apache Batik converted PNG is: enter image description here

In the Windows 7 running tomcat 7 and Java 7, the generated image is identical to the original SVG.

As the Cent OS server it gives the text messed image I feel the Arial font is not available to the tomcat/java application and need to load it manually. If so I prefer to have an advice to load them in a common way from the underlying OS location (OS font location) without any changes to the SVG file.

Was it helpful?

Solution

You need to install Microsoft truetype fonts and make them available to java virtual machine by setting JAVA_FONTS environment variable.

wget http://www.my-guides.net/en/images/stories/fedora12/msttcore-fonts-2.0-3.noarch.rpm

rpm -ivh msttcore-fonts-2.0-3.noarch.rpm

Open /etc/bashrc and add following to the end of the file

JAVA_FONTS=/usr/share/fonts/msttcore

export JAVA_FONTS

http://www.itzgeek.com/how-tos/linux/centos-how-tos/how-to-install-microsoft-truetype-fonts-in-centos-6-rhel-6.html#axzz2aibHZaOI

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top