SVG font definitions do not work on CentOS 6.5 using Imagick

[axertion]

I cannot for the life of me figure out why my custom fonts are not working with ImageMagick converting SVGs to different file formats. I've scoured the forums and net trying pretty much all solutions and Imagick just doesn't use the custom fonts.

Server OS:
Centos 6.5, 32bit

ImageMagick Version:
Version: ImageMagick 6.5.4-7 2014-02-10 Q16 OpenMP http://www.imagemagick.org

PHP Version:
PHP 5.3.3 (cli) (built: Dec 11 2013 03:15:48)
Copyright (c) 1997-2010 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2010 Zend Technologies

What I've done and tried to install fonts:

1. Create the file /home/username/.magick/type.xml with the correct font definitions. The file looks like this:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE typemap [
<!ELEMENT typemap (type)+>
<!ELEMENT type (#PCDATA)>
<!ELEMENT include (#PCDATA)>
<!ATTLIST type name CDATA #REQUIRED>
<!ATTLIST type fullname CDATA #IMPLIED>
<!ATTLIST type family CDATA #IMPLIED>
<!ATTLIST type foundry CDATA #IMPLIED>
<!ATTLIST type weight CDATA #IMPLIED>
<!ATTLIST type style CDATA #IMPLIED>
<!ATTLIST type stretch CDATA #IMPLIED>
<!ATTLIST type format CDATA #IMPLIED>
<!ATTLIST type metrics CDATA #IMPLIED>
<!ATTLIST type glyphs CDATA #REQUIRED>
<!ATTLIST type version CDATA #IMPLIED>
<!ATTLIST include file CDATA #REQUIRED>
]>
<typemap>

  <type
     format="ttf"
     name="Lobster"
     fullname="Lobster"
     family="Lobster"
     glyphs="/home/username/fonts/Lobster/Lobster.ttf"
     style="normal"
     stretch="normal"
     weight="400"
     />

</typemap>

2. Added a direct includes in the /usr/lib/ImageMagick-6.5.4/config/type.xml file like this:

Code: Select all

<typemap>
   <include file="type-ghostscript.xml" />
   <include file="/home/username/.magick/type.xml" />
</typemap>

3. When outputting the fonts using the $image->queryfonts(); method in PHP, I can see the Lobster font defined in the list. For example, this:

Code: Select all

$image = new Imagick();
$fonts = $image->queryfonts();
foreach($fonts as $font) {
    echo $font . '<br />';
}

Returns this:

Code: Select all

[...]
Hershey-Plain-Triplex-Regular
Hershey-Script-Complex-Regular
Hershey-Script-Simplex-Regular
Lobster
MeriendaOne
NewCenturySchlbk-Bold
NewCenturySchlbk-BoldItalic
NewCenturySchlbk-Italic
NewCenturySchlbk-Roman
[...etc]

4. The command convert -list font | grep Lobster returns the Lobster font, so ImageMagick is seeing it:

Code: Select all

  Font: Lobster
    family: Lobster
    glyphs: /usr/share/nginx/.fonts/Lobster/Lobster.ttf

5. Add the fonts to the system itself using the fc-cache command.
6. I've restarted the entire server, rebooted the php-fpm process, cleared caches and temp directories.

My PHP code I am testing with, and expecting the font to render is:

Code: Select all

//Setup SVG to be read by Imagick.
$SVG = '<?xml version="1.0" encoding="utf-8"?>';
$SVG .= '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
$SVG .= '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="158px" height="92px" viewBox="0 0 158 92" enable-background="new 0 0 158 92" xml:space="preserve">';
$SVG .= '<text transform="matrix(1 0 0 1 32 58)" font-family="Lobster" font-style="normal" font-size="20px" font-weight="400">Lobster</text>';
$SVG .= '</svg>';

$image = new Imagick();

//Convert SVG to JPG
$image->readImageBlob($SVG);
$image->setImageFormat("jpeg");

//Save the thumbnail.
$save_path = '/home/username/lobster.jpg';
$image->writeImage($save_path);

echo '<img src="lobster.jpg" alt="" /><br />';

However lobster.jpg only shows a default font:



Is there a known issue with Centos 6.5 and ImageMagick/PHP for SVG font rendering? I'm tried everything and I just cannot get this to work. Any help would be greatly appreciated!

[fmw42]

Perhaps it might help to use Anthony's script to create your type.xml file. See http://www.imagemagick.org/Usage/script ... k_type_gen and http://www.imagemagick.org/script/resources.php#fonts for the location where you can put this file

[snibgo]

In my experiments with fonts in SVG, on Windows 8.1, the only critical step is to install the font so Windows knows about it. It seems that IM doesn't pass font information to the SVG process, and it doesn't matter if IM knows about the font or not. The SVG process seems to get font info directly from the O/S.

Centos may be different, of course.

[fmw42]

User snibgo knows more about SVG files than I do, so I would trust his expertise. I am on a Mac and have no problem with fonts. I do not know where the Mac OS gets its font list for use with SVG files. All I know is that IM uses the type.xml file to find fonts so that full paths are not needed. I do not know about SVG files, but perhaps you can try the full path to the font, if that is feasible in SVG files.

[snibgo]

A bit of further explanation: the IM processes "-annotate", "label:" etc use "-font", which uses data in type.xml, or you can put the full file path in "-font".

But SVG uses a different route for font data. The SVG spec doesn't say the filename can be used within the SVG file, and experiments suggest that the path/filename can't be used. If the font is installed on the O/S, SVG can use it. Otherwise it can't.

This causes some grief when IM is used on a shared server. I don't use a server, but I'm not aware of any way around this.

[axertion]

In my experiments with fonts in SVG, on Windows 8.1, the only critical step is to install the font so Windows knows about it. It seems that IM doesn't pass font information to the SVG process, and it doesn't matter if IM knows about the font or not. The SVG process seems to get font info directly from the O/S.

Centos may be different, of course.

What's the point of telling ImageMagick about the font then? It just seems counter-intuitive that I specify the font, only for ImageMagick not to use it in it's SVG conversion process.

I believe you are correct though. Unless the OS knows about the font, it just won't be used in SVG conversions. I tried installing the font system-wide based on your assumption and it worked. This works for me, but it completely negates the need for the type.xml configuration in the first place!

What I did to get it to work was:

1. Copy the Lobster.ttf file to /usr/share/fonts/default/truetype/Lobster.ttf
2. Run the command fc-cache -v /usr/share/fonts
3. Run the command fc-list to get a list of the font family names the OS recognizes, I noticed that Lobster is installed, but under the font-family Lobster 1.4
fc-list | grep Lobster returns this:

Code: Select all

Lobster 1.4,Lobster:style=Regular

4. In my SVG, I changed font-family to Lobster 1.4

Code: Select all

font-family="Lobster 1.4"

5. Now it renders the image with the correct font!


---

What I would like to know is if the ImageMagick team could (in theory) make it work so that fonts recognized by IM get used no matter what. It would certainly eliminate a lot of the confusion with the font process

[snibgo]

type.xml is used by IM for rasterising text, when that process is (in some sense) "internal" to IM. So IM commands "label:" etc use it.

The best[*] delegate for rasterising SVG is Inkscape. I doubt that there is any mechanism for IM to pass font data to Inkscape, or for Inkscape to ask IM for it.

Alternative delegates are MSVG and RSVG. These are "internal" in the sense that they are compiled into IM's programs. A developer would need to comment on the feasibility of IM passing on font information.


[*] That's my personal view. I think Inkscape provides the most complete implementation of SVG 1.1. But it isn't the fastest delegate.

[axertion]

Isn't that what ImageMagick is supposed to do with SVG text though? Rasterize it into a JPG or PNG or whatever format requested? (sorry, my knowledge of how it works is primitive).

I realize it may be using some system built in SVG rendering engine, but there just seems to be a lack of documentation or outline on how it works in general. It just seems like it "sort of" works if you get the configuration setup the way the documentation tells you to.

I came across another issue with this. It seem like it uses the fonts randomly when converting an SVG to a flat image. Check out my test example here:

http://107.170.183.105/svgtojpg/lobster.php

If you refresh the page repeatedly, sometimes the image generated will be with a default, basic font (not the one requested).

There must be a way to improve this somehow. The way it works on CentOS is really unstable and frankly unusable :/

[fmw42]

Best I can think of is that you do not have the lobster font properly installed and it is taking some substitute or the lobster font is corrupt.

With regard to the fonts issue, IM uses both Inkscape and RSVG as delegate libraries. Thus I suspect, the fonts are defined in the SVG file and it is up to the delegate libraries to find them or for you to have them installed. I do not think IM has any control on passing fonts to either delegate library and the delegates apparently look to the system for the font defined in the SVG file. Thus it is not IM's problem, since IM uses fonts installed in the type.xml file only with the -font argument, which is not used by SVG. I think you may be asking too much of IM.

Try running your SVG file directly with Inkscape or RSVG.

However, I will defer to snibgo who is more experienced with SVG files than I am.

P.S. If I run your php file, I also see changing fonts for the word Lobster at the top. But all the rest seem to stay constant. That suggests that there is something wrong with the Lobster font or its installation.

What do you get if you run:

Code: Select all

convert -size 100x -background white -fill black -font path2/lobster.ttf label:"Lobster" result.png

Does it change every time you run that? That would tell whether there is something odd about your Lobster font.

[snibgo]

http://107.170.183.105/svgtojpg/lobster.php

The file delivered to my browser has an image, test.jpg, followed by a load of text. I suppose test.jpg is re-created when I hit refresh. Yes, it changes font for me too.

Maybe there is something funny about the PHP (about which I know nothing) or the SVG. I'll look at the SVG if you paste it here, between [ code ] and [ /code ].

Maybe there is a locking problem on test.jpg, or the ttf font file, or multiple instances of ImageMagick's convert, or ...

If you simply want a list of fonts each in their own font, I wouldn't use SVG. There's no need, and it just adds extra complexity and processing requirement.

[axertion]

I'm building a tool that allows customers to customize text on a jacket, and it leverages SVGs rendered in the browsers for the previews.

What I am trying to do is convert the SVG to a flattened image so I can save it to the server and view it later (without having to have fonts installed etc to view it exactly how it was created)

This is the complete SVG I am testing with the Lobster font (and the one you see being converted in my example URL)

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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="158px" height="92px" viewBox="0 0 158 92" enable-background="new 0 0 158 92" xml:space="preserve">
<text transform="matrix(1 0 0 1 32 58)" font-family="Lobster 1.4" font-size="36">Lobster</text>
$SVG .= '</svg>

[snibgo]

So, your SVG has no vector graphics aside from the text? I can't see why you would want to use SVG, and plenty of reasons not to use it. I don't think SVG gives you more than you can get from, eg:

Code: Select all

convert -size 158x92 xc: -pointsize 36 -gravity Center -font "lobster 1.4" -annotate 0 "lobster" x.png

[axertion]

No, my vector graphic is a jacket. I didn't embed it here in the forums as it contains large image data (the image overlay for the shading etc).

Look at this to see an example: http://107.170.178.240/test.php

The user enters in text, it appears as rendered SVG in the browser (created with Raphael). When the user saves his jacket, the SVG data is passed to the server running apache/PHP, then PHP using Imagick to convert the SVG data into a JPG image.

[snibgo]

Okay, fair enough. SVG is primarily a vector language but can embed or link to raster graphics. IM is pimarily a raster processor and can't do much with vectors (aside from rasterising them). Inkscape is primarily a vector processor but can also do quite a lot with rasters. However, it is primarily interactive, not batch.

I've never used Raphael. I would be wary of using different engines for rasterisation, eg user proof-reading from one tool but printing from another.

[axertion]

I've never used Raphael. I would be wary of using different engines for rasterisation, eg user proof-reading from one tool but printing from another.

I don't really have a choice. Rasterizing from the browser just isn't possible with Raphael, and to do it I would have to import the SVG into Canvas (which isn't supported by some of the older browsers).

My hands are tied, I have to work with what's available unfortunately.