CODEWITHSUNDEEP
svgphantomjs
Vitaly
Vitaly

Reputation: 79

Phantomjs font rendering issue in svg file

I have an SVG file which I'd like to convert to PNG, but there is an issue with displaying fonts in output PNG.

Here is how original SVG looks in the chrome browser:

enter image description here

Here is how it looks after converting to PNG using Phantomjs:

enter image description here

Any ideas why it cuts the text?

Phantomjs v2.1 on Amazon Linux AMI release 2017.03

EDIT:

Here is the svg (font included): http://45.55.136.163/p/demo.svg

Upvotes: 0

Views: 339

Answers (1)

Kevin Thibedeau
Kevin Thibedeau

Reputation: 3421

The metrics for the magnolia_sky font set the descender at 250 units. Looking at the "g" it is being clipped at this line. The ascender is at 750 units which corresponds to the place the "H", "d", and "i" is clipped.

It would seem that PhantomJS is hard clipping each glyph to a box determined by the vertical metrics for the font as a whole rather than checking for glyphs that extend beyond those limits. You could edit the metrics in Fontforge as a workaround. The kerning is also not being applied correctly (or at all) which is why the glyphs don't connect together as intended by the designer. Whatever renderer PhantomJS is using is just applying the base glyph advance for each character with no further adjustment.

Upvotes: 1

Related Questions