Help SVG -> JPG with fonts (font-family attribute)

[kingIZZZY]

Hello,

Trying to convert a chunk of SVG markup to a JPG image.
It mostly works, except

1. [SOLVED-ish] Right-to-left text displays left-to-right, regardless of whether the SVG markup has direction="rtl", direction="ltr", or no direction attribute at all.
   I solved this by manually reversing the right-to-left text characters
2. Fonts don't work. A generic/default font seems to always be used. SVG font-family="" attribute doesn't seem to influence the font used by imagemagick to render the jpg.

====================================================================
Details:

What i've tried:

• Installed my fonts for imagemagick with imagick_type_gen.pl and ~/.magick/type.xml. Even that had problems when `convert -list font` did show the font installed, but style and stretch were Undefined, and weight was 0.
• Installed local user system fonts by placing the fonts in ~/.fonts and running `fc-cache -vf`. This time `convert -list font` showed the font nicely with style/stretch/weight filled in (Normal/Normal/400).
• Tried using the "Font:" and then "Family:" values from `convert -list font` inside font-family="" attributes. Which one is it supposed to be BTW?

Version: ImageMagick 6.7.9-10 2013-08-29 Q16
Features: OpenMP

convert -list config | grep DELETAGES: bzlib djvu fontconfig freetype gs jpeg jng jp2 lcms openexr png tiff xml wmf zlib
convert -list config | grep CONFIGURE ./configure '--host=x86_64-redhat-linux-gnu' '--build=x86_64-redhat-linux-gnu' '--target=x86_64-redhat-linux' '--program-prefix=' '--prefix=/usr' '--exec-prefix=/usr' '--bindir=/usr/bin' '--sbindir=/usr/sbin' '--sysconfdir=/etc' '--datadir=/usr/share' '--includedir=/usr/include' '--libdir=/usr/lib64' '--libexecdir=/usr/libexec' '--localstatedir=/var' '--sharedstatedir=/usr/com' '--mandir=/usr/share/man' '--infodir=/usr/share/info' '--enable-shared' '--disable-static' '--with-modules' '--with-perl' '--without-x' '--with-threads' '--with-magick_plus_plus' '--with-gslib' '--with-wmf' '--with-lcms' '--without-rsvg' '--with-xml' '--with-perl-options=INSTALLDIRS=vendor CC='\''gcc -L/usr/src/redhat/BUILD/ImageMagick-6.7.9-10/magick/.libs'\'' LDDLFLAGS='\''-shared -L/usr/src/redhat/BUILD/ImageMagick-6.7.9-10/magick/.libs'\''' '--without-dps' '--without-included-ltdl' '--with-ltdl-include=/usr/include' '--with-ltdl-lib=/usr/lib64' 'build_alias=x86_64-redhat-linux-gnu' 'host_alias=x86_64-redhat-linux-gnu' 'target_alias=x86_64-redhat-linux' 'CFLAGS=-O2 -g -m64 -mtune=generic' 'CXXFLAGS=-O2 -g -m64 -mtune=generic'

Using PHP imagick:

Code: Select all

// ...
$im = new Imagick();
$im->readImageBlob('<?xml version="1.0" encoding="UTF-8" standalone="no"?>' . $svg);
$im->setImageFormat("jpeg");
$im->resizeimage($thumb_tc['width'],$thumb_tc['height'], /*Imagick::FILTER_GAUSSIAN* /null, 0.9, false);
//$im->adaptiveResizeImage($thumb_tc['width'],$thumb_tc['height']);
$im->writeImage($thumb);
$im->clear();
$im->destroy();

Example SVG snippet:

Code: Select all

<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1638 2550" preserveAspectRatio="xMinYMin" style="overflow: hidden; position: relative;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><image x="0" y="0" width="1638" height="2550" preserveAspectRatio="none" xlink:href="http://tzetelmaker.com/wp-content/uploads/2013/12/KiddishWater.jpg" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image><text x="819.00" y="1415.00" text-anchor="middle" font="97 owilnaclassicregular" stroke="none" fill="#000000" font-family="owilnaclassicregular" font-size="97px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 97px; line-height: normal; font-family: owilnaclassicregular;"><tspan dy="35.4140625" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">פרשת בלק</tspan></text><text x="819.00" y="1571.00" text-anchor="middle" font="56 owilnaclassicregular" stroke="none" fill="#000000" font-family="owilnaclassicregular" font-size="56px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 56px; line-height: normal; font-family: owilnaclassicregular;"><tspan dy="21.25" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">בבית המדרש</tspan></text><text x="819.00" y="1642.00" text-anchor="middle" font="144 owilnaclassicregular" stroke="none" fill="#000000" font-family="owilnaclassicregular" font-size="144px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 144px; line-height: normal; font-family: owilnaclassicregular;"><tspan dy="51" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">מגד יהודה</tspan></text><text x="819.00" y="1722.00" text-anchor="middle" font="45 owilnaclassicregular" stroke="none" fill="#000000" font-family="owilnaclassicregular" font-size="45px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 45px; line-height: normal; font-family: owilnaclassicregular;"><tspan dy="17" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">225 bedford Ave.</tspan></text><text x="819.00" y="1767.00" text-anchor="middle" font="50 owilnaclassicregular" stroke="none" fill="#000000" font-family="owilnaclassicregular" font-size="50px" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 50px; line-height: normal; font-family: owilnaclassicregular;"><tspan dy="18.4140625" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">זמן שחרית 9:30</tspan></text></svg>

[snibgo]

Have you tried Inkscape as the SVG delegate?

To isolate SVG vs. PHP problems, you could initially try running Inkscape from the command line:

Code: Select all

inkscape -f in.svg -e out.png -y 1

[kingIZZZY]

Gah, wish you didn't ask that... Unfortunately my shared hosting account doesn't let me `yum install inkscape`... (nor would the support admins install it for me...)

Any other hope?

Might anyone know for a fact that the default alternatives to inkscape cannot follow font-family attributes? Or, is there something i'm missing in my markup or in my converting code to make it work?

[snibgo]

An experiment shows that IM, by itself without Inkscape, if it can't find the font will fallback to the font family.

Code: Select all

<svg height="100%"
   version="1.1"
   width="100%"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 1638 2550"
   preserveAspectRatio="xMinYMin"
   style="overflow: hidden; position: relative;">
  <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
  <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
  </defs>
  <text x="819.00"
     y="1722.00"
     text-anchor="middle"
     font="50 owilnaclassicregular I don't have"
     stroke="none"
     fill="#000000"
     font-family="Palatino Linotype"
     font-size="160px"
     style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 160px; line-height: normal; font-family: Palatino Linotype;">
    <tspan dy="17"
       style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">225 bedford Ave.</tspan>
  </text>
</svg>

I have no font called "50 owilnaclassicregular I don't have" so it falls-back to another font in the family "Palatino Linotype".

[kingIZZZY]

But I have my font name populated in both the font="" and the font-family="" attributes

[snibgo]

Your problem 2 ...

Fonts don't work. A generic/default font seems to always be used. SVG font-family="" attribute doesn't seem to influence the font used by imagemagick to render the jpg.

... seems to be incorrect. If the font exists, it will be used. If it doesn't exist, it will fallback to another font in the same family. Your SVG should specify a fallback font and/or a fallback family, eg

Code: Select all

font-family: owilnaclassicregular, Palatino Linotype, Arial;

[kingIZZZY]

I truly wish you were right snibgo... My system does have this font installed but it still doesn't seem to render it. Here is the `convert -list font` entry for my font:

Code: Select all

  Font: Narkisim-Regular
    family: Narkisim
    style: Normal
    stretch: Normal
    weight: 400
    glyphs: /home/wtvr/.fonts/Narkisim.ttf

SVG Snippet:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" width="100%" viewBox="0 0 3300 2550" preserveAspectRatio="xMinYMin" style="overflow: hidden; position: relative;">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Rapha&#xEB;l 2.1.2</desc>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"/>
    <image x="0" y="0" width="3300" height="2550" preserveAspectRatio="none" href="http://tzetelmaker.com/wp-content/uploads/2014/01/Tenoyim101WM.jpg" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"/>
    <text x="1629.00" y="1000.00" text-anchor="middle" font="500 Narkisim" stroke="none" fill="#000000" font-family="Narkisim" font-size="500px" direction="rtl" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-size: 500px; line-height: normal; font-family: narkisim;">
        <tspan dy="167.90625" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">ךלמה יחי</tspan>
    </text>
</svg>

[snibgo]

Strange. v6.7.9 is old; an upgrade might help. Do you get any error/warning messages?

In v6.8.8-0, when I specify a font I don't have, it falls back to another in the given family. If there is no font in the first family, it uses one in the second.

[kingIZZZY]

Argh! As mentioned, it's a shared hosting account, can't update the package...

Is it possible to make a "copy/paste" installation of IM and/or Inkscape? As in; build the packages on an identical machine locally and then just upload the built files to my hosting account and set them up into $PATH or whatever?

[snibgo]

If your server is Windows, I think you can just copy the "portable" build to your own directory and run it. (If your server admin allows, of course!) But I've never tried this. For other OS's I don't know.

[kingIZZZY]

Host seems to be:
x86_64 GNU/Linux
CentOS release 5.9 (Final)

[doyley3]

Did you get anywhere with this? Facing the same issue...