CODEWITHSUNDEEP
phpcsssvgimagemagickimagick
Daniel
Daniel

Reputation: 3691

How to use SVG CSS styles with IMagick?

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.

Upvotes: 2

Views: 1996

Answers (4)

dearsina
dearsina

Reputation: 5202

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.

Upvotes: 0

Aurel
Aurel

Reputation: 423

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

Upvotes: 1

fmw42
fmw42

Reputation: 53164

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

enter image description here

What is your version of RSVG.

convert -list format

will tell you.

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

Upvotes: 2

Daniel
Daniel

Reputation: 3691

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

Upvotes: 3

Related Questions