piqnt / svgexport

SVG to PNG/JPEG command-line tool and Node.js module
927 stars 85 forks source link

svgexport does not render font properly on Ubuntu #12

Closed hans-t closed 9 years ago

hans-t commented 9 years ago
<svg version="1.1" id="Layer_1" 
  xml:space="preserve"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
  x="0px" y="0px" width="600px" height="600px" viewbox="0 0 600 600">
<style type="text/css" >
    <![CDATA[

      @font-face {
        font-family: uGillSansLocal;
        src: local('Gill Sans');
      }

      @font-face {
        font-family: uGillSansURL;
        src: url('./GillSans.ttf');
      }

    ]]>
</style>
<rect id="Border" x="0" y="0" stroke="#000000" fill="#FFFFFF" width="600" height="600"/>
<text x="100" y="30" font-size="32px" font-family="uGillSansLocal">
    <tspan>uGillSans local</tspan>
    <tspan x="100" dy="40">qwertyuiop[]\asdfghjkl;'</tspan>
    <tspan x="100" dy="40">zxcvbnm,./QWERTYUIOP[]|</tspan>
    <tspan x="100" dy="40">ASDFGHJKL:"ZXCVBNM&lt;>?</tspan>
    <tspan x="100" dy="40">1234567890-=!@#$%^&amp;s*()_+</tspan>
</text>
<text x="100" y="300" font-size="32px" font-family="uGillSansURL">
    <tspan>uGillSans url</tspan>
    <tspan x="100" dy="40">qwertyuiop[]\asdfghjkl;'</tspan>
    <tspan x="100" dy="40">zxcvbnm,./QWERTYUIOP[]|</tspan>
    <tspan x="100" dy="40">ASDFGHJKL:"ZXCVBNM&lt;>?</tspan>
    <tspan x="100" dy="40">1234567890-=!@#$%^&amp;s*()_+</tspan>
</text>
</svg>

This is an SVG file. In ubuntu the rendering looks like this: rendering in ubuntu. Some characters are rendered wrongly.

However in Mac OS X the rendering like this: rendering in mac os x. I used svgexport to render both.

From what I understand, svgexport uses PhantomJS to render SVG. I suspect this is not a problem in PhantomJS, but rather some missing library for font rasterization in Ubuntu.

FYI, Both systems have already the required font installed. Both have latest version of svgexport. How should I go about fixing this? Thanks.

I've installed libfreetype6 and fontconfig on Ubuntu. Still doesn't work. However, the SVG looks okay on Chrome on both systems.

shakiba commented 9 years ago

I'm not able to reproduce this issue. It produces correct result for both local and url for me. Have you tried other fonts?

hans-t commented 9 years ago

I tried with Baskerville, it's fine. But the perplexing thing is, when I view it with Chrome, everything is fine, but not with svgexport.

shakiba commented 9 years ago

So do other fonts render correctly in svgexport/phantomjs?

hans-t commented 9 years ago

I'll test, and let you know.

hans-t commented 9 years ago

I believe, it's the font, i.e. GillSans Regular, problem. I have found the workaround, convert the font to SVG font, and then never use the font's name as font-family value; use custom value for your font-family. It works on Mac OS X 10.10.4 and Ubuntu 14.04, with svgexport 0.2.5 and phantomjs 1.9.17.

shakiba commented 9 years ago

Another possibility is that your font file is broken, I suggest you get the font file from another resource and try again.

felipemarques commented 7 years ago

We have the same problem ... someone more issues as this?