convert svg to png; font size changes with density

[pheon]

I have an .svg file I'd like to render as a .png.

It contains lines like

<g id="ID000008" >
<g transform="translate(68.250,259.228)">
<text x="0.000" y="0.000" font-family="Helvetica" text-anchor="start" font-size="11pt" fill="#000000" >12pt, Helvetica, painters : QWERTYUIOPqwertyuiop1234567890</text>
</g>
</g>

I have tried

convert +antialias -density 300 -verbose test.svg test.png

but the size of the fonts changes with the density I choose and the resulting .png doesn't look like it does in a browser. The lines are all bunched together, with the bunching increasing with the density number.

[fmw42]

vector files like svg have no size. they are controlled by the density you supply when converting to png or any other format. when viewing svg files the size is determined by the viewer which sets its own nominal density, often 96 rather than 72.

try supersampling

convert -density 288 test.svg -resize 25% test.png

72 dpi is nominal, so 72*4=288 and thus we resize by 1/4 = 25%

If that fails, then try installing RSVG delegate, which is better than the built-in one in IM>

[pheon]

I think I have rsvg; how would I check?

convert -density 288 test.svg -resize 25% test.png

didn't work. The text is still bunched up.

convert -density 72 test.svg test.png

gives the text at the height I expected, and with the spacing I expected.

I know that points and pixels don't necessarily mix, but the convention in browsers that render svg seems to be that 10 point type is 10 pixels high (where "pixels" are the units of the svg grid).

[fmw42]

I think I have rsvg; how would I check?

convert -density 288 test.svg -resize 25% test.png

didn't work. The text is still bunched up.

convert -density 72 test.svg test.png

gives the text at the height I expected, and with the spacing I expected.

I know that points and pixels don't necessarily mix, but the convention in browsers that render svg seems to be that 10 point type is 10 pixels high (where "pixels" are the units of the svg grid).

These should be identical in size, but the former should be higher quality

convert -density 288 test.svg -resize 25% test.png
convert -density 72 test.svg test.png

type

convert -list format

SVG SVG rw+ Scalable Vector Graphics (XML 2.7.8)

If you have RSVG it will say that where mine is red above as I do not have it currently enabled.

You might post a link to your svg file for other to test

[pheon]

Code: Select all

<svg 
  xmlns="http://www.w3.org/2000/svg" 
>
<line 
  x1="0" 
  y1="100" 
  x2="500" 
  y2="100" 
  stroke="grey" 
  />
<line 
  x1="0" 
  y1="90" 
  x2="500" 
  y2="90" 
  stroke="grey" 
  />
<text 
    x="10"
    y="100" 
    font-family="Helvetica" 
    font-size="10pt" 
    >
    10pt, Helvetica : QWERTYUIOPqwertyuiop1234567890
</text>
<text 
    x="10"
    y="120" 
    font-family="Helvetica" 
    font-size="12pt" 
    >
    12pt, Helvetica : QWERTYUIOPqwertyuiop1234567890
</text>
</svg>

Above is a "test.svg". On my system, the first command

convert -density 72 test.svg test.png

results in two lines of text, the first bracketed by lines, the second below it with space. The second command

convert -density 288 test.svg -resize 25% test.png

results in two lines of text, the first overshoots the lines, the second overlaps with the first.

convert -list format

results in a line

SVG SVG rw+ Scalable Vector Graphics (RSVG 2.36.3)

Version: ImageMagick 6.7.9-0 2012-09-28 Q16 http://www.imagemagick.org
running under macports on OS X 10.8.2

[fmw42]

On my Mac with IM 6.7.9.8 without RSVG, I get


convert -density 72 test2.svg test.png
convert: must specify image size `/tmp/magick-3pt24sbp' @ error/mvg.c/ReadMVGImage/185.


I suspect you have not specified the svg file properly

[pheon]

The .svg renders correctly in every browser I have tried, so I think it's OK. But digging some more, I think I have to specify the font-size in pixels not points. Everything works fine then. Thanks for your help.

[pheon]

On further reading, I do feel that ImageMagick or librsvg is in error somewhere. This document

http://www.w3.org/TR/SVG/coords.html#Units

explains that the unit "pt" in SVG should be interpreted as either 1.25px, and therefore the renderer should appropriately scale the font to fit within my lines at whatever resolution.

[pheon]

I think it must be an ImageMagick thing. I found a ruby script which uses librsvg and it renders my files as I expect where convert does not.

[anthony]

The .svg renders correctly in every browser I have tried, so I think it's OK. But digging some more, I think I have to specify the font-size in pixels not points. Everything works fine then. Thanks for your help.

BAD IDEA.. Specifying in pixels means you loose the ability to scale the image for different densities.

The problem sounds like the SVG is not be specifying a 'canvas' on which to draw the fonts, though I have not read the SVG file to be sure.

Try using RSVG command directly, as this should be equivalent to what IM is doing (if the librsvg library is installed).

See MSVG vs RSVG codecs in ImageMagick.
http://www.imagemagick.org/Usage/draw/#svg