CODEWITHSUNDEEP
phpsvgdebianimagemagickwebserver
klischee
klischee

Reputation: 45

ImageMagick ignores style sheets in SVG (conversion to PNG with php-imagick)

I am using a SVG template which I load with ImageMagick in PHP to insert some values into the DOM and then converting it to PNG. On my local dev environment this is working fine, but on my remote Webserver not, the resulting Image is mostly black.

It seems ImageMagick is not able to read the Stylesheet declaration and apply the classes. I tried to find out why, but without any success. I don't get an Exception and other threads imply older Versions of ImageMagick can have this issue but it seems the version is quite current.

imagick php module info on the webserver

I am a bit confused PHPInfo says the module version is 3.4.4 but released in 2017, while the ImageMagick website says 3.4.4 got released in 12/2020. Does this make sense? My local dev environment uses the same Version but with some additional info (3.4.4.r66.g448c1cd) and with a release date of 2021-01-30. So I am not sure if I use the current version on the web server or not.

By default the imagick module was not able to handle the SVG file type, so I've installed "libmagickcore-6.q16-3-extra" and reloaded php and nginx. Since then I get the PNG but without the style sheet applied.

Server Info: Debian GNU/Linux 9.9 (stretch), PHP7.3, nginx/1.10.3

This is how the beginning of my SVG looks:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
   width="975" height="579.05542" viewBox="0 0 974.99995 579.05544" xml:space="preserve" id="svg_score">
   <defs id="defs">
      <style type="text/css" id="style">
         @font-face {
            font-family: SFProDisplay-Regular;
            src: url('sfprodisplay-regular.ttf');
         }
         .st0 {
            fill: #FFFFFF;
         }
         .st1 {
            fill-rule: evenodd;
            clip-rule: evenodd;
         }
         .st2 {
            clip-path: url(#SVGID_10_);
         }
         .st3 {
            clip-path: url(#SVGID_12_);
         }
         .st4 {
            fill: #77af42;
            stroke: #000000;
            stroke-width: 2.11;
            stroke-linejoin: round;
            stroke-miterlimit: 10;
         }
         .st11 {
            fill: none;
            stroke: #FFFFFF;
            stroke-width: 3;
            stroke-miterlimit: 10;
         }
         .filledstar {
            fill: #FFFFFF;
            stroke: #FFFFFF;
            stroke-width: 3;
            stroke-miterlimit: 10;
         }
         .value {
            font-style: normal;
            font-variant: normal;
            font-stretch: normal;
            font-family: SFProDisplay-Regular;
            font-size: 36.3px;
            letter-spacing: -.7;
         }
      </style>
   </defs>

I've also tried to put the style tag outside of the defs tag, but this not work either. An option could be to change the SVG delegate to Inkscape but this makes this issue more complex I think, as I see on my dev ImageMagick can do it, and I did not find out how I can change the delegete to Inkscape for php-imagick.

I have no ideas anymore and really hope you can help me with this issue.

Upvotes: 0

Views: 517

Answers (1)

fmw42
fmw42

Reputation: 53164

ImageMagick can use any of 3 different SVG renderers. In order of resulting quality, one is the Imagemagick internal MSVG/XML renderer, the next is the RSVG delegate and the last is Inkscape. You may have one of the latter on the one system that works and the internal one on the system that gives a black result. I suggest you install Inkscape on both systems and then test again. ImageMagick will use Inkscape if it can find it, otherwise it defaults to MSVG if it cannot find RSVG. RSVG needed to be installed as a delegate library, but Inkscape can be installed separately.

Upvotes: 1

Related Questions