如何在 IMagick 中使用 SVG CSS 样式？

Question

It seems that the (PHP) Imagick does not accept styling with CSS even if the <style> is inside the SVG's <def> . Is that correct? I couldn't find a reference for this.

If so, what would be a way to still get the desired results? Maybe replace all the classes with their definitions? So, for example, if there is

.some-class {
  stroke-dasharray: 5 5;
}

then replace class="some-class" by stroke-dasharray="5 5" , or, alternatively, by style="stroke-dasharray: 5 5;" since Imagick seems to understand style attributes.

Answer 1

Seems to be a bug in librsvg. If I add type="text/css" to the <style> tag it works like a charm.

Answer 2

I saved your code to a file as test.svg and used Imagemagick 6.9.9.30 Q16 Mac OSX with RSVG (librsvg @2.42.2_0) and it works fine. I get a small red square:

convert test.svg test.png

What is your version of RSVG.

convert -list format

will tell you.

Perhaps you need to upgrade RSVG or your version of Imagemagick.

Answer 3

I had the same issue recently, was working on my localhost but not on the server, due to a missing package. I installed inkscape and the SVG generation from Imagick (actually I'm using Intervention Image with the driver set to imagick)

apt-get install inkscape

EDIT: at first the SVG generation was not working at all and I followed this thread Imagick SVG to JPG error no decode delegate

However,after that, the SVG generation was working, unfortunately the rendered PNG from a SVG was in greyscale. I thought the styles in the SVG were missing and this thread helped me: how to resize an SVG with Imagick/ImageMagick

Answer 4

A small caveat for those that may be at their wits end. Imagemagick seems to only consider one <style> tag, if you have more than one, it will only consider the last, and disregard the others.