SVG to PNG text-anchor:middle bug.

[eleison]

I just found out that my svg to png conversions with Imagemagick doesn't display text correct.

ImageMagick 6.9.0-4 Q16 x86_64 2015-01-23
CentOS release 6.6 (Final)

Code: Select all

convert -list delegate | grep svg
        cdr =>          "uniconvertor" "%i" "%o.svg"; mv "%o.svg" "%o"
        cgm =>          "uniconvertor" "%i" "%o.svg"; mv "%o.svg" "%o"
        dot =>          "dot" -Tsvg "%i" -o "%o"
        dxf =>          "uniconvertor" "%i" "%o.svg"; mv "%o.svg" "%o"
        fig =>          "uniconvertor" "%i" "%o.svg"; mv "%o.svg" "%o"
        svg =>          "rsvg-convert" -o "%o" "%i"

Code: Select all

convert -list format | grep SVG
     MSVG  SVG       rw+   ImageMagick's own SVG internal renderer
      SVG  SVG       rw+   Scalable Vector Graphics (RSVG 2.26.0)
     SVGZ  SVG       rw+   Compressed Scalable Vector Graphics (RSVG 2.26.0)

I use "text-anchor:middle" to center my text. Sadly it's not getting centered correct, I am desperate to fix this! So if anyone have a solution to this I am grateful!

The amount in miss alignment is different from font to font. But there is almost always a miss alignment, some fonts maybe just minor differences. The alignment also differ from different inputted text, see image...

This is an example svg code that I convert to png:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="686" height="500" viewBox="0 0 686 500" enable-background="new 0 0 686 500" xml:space="preserve">

<style>
<![CDATA[
.text1{
fill: #000000;
font-family: Raleway;
font-size: 25;
text-anchor: middle;
}
]]>
</style>

<text x="50%" y="200" class="text1">tttttttttttttttttttttt                     ttttttttttttttttttttt</text>
<text x="50%" y="250" class="text1">ooooooooooooooooooOOOOooooooooooooo</text>
<text x="50%" y="300" class="text1">ddddddddddddddddddddddddddddddd</text>

</svg>

Result: