Why is the use-Tag from SVG in ImageMagick ignored?

39 Views Asked by At

If you e.g. use (no pun intended) the example usage of the use tag for SVG from https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
</svg>

and watch it in your browser you will see three circles, the original and two reused copies. If you on the other hand feed this code to ImageMagick you will only see one circle as the use tag is ignored by the SVG processor in ImageMagick. Is there any way to repair this?

  • Image as it should be: Three circles in a horizontal row
  • as displayed by ImageMagick: One circle
2

There are 2 best solutions below

0
HackerManxXx91 On

As you see ImageMagick is ignoring the tag, so the elements are not being replicated as you would like it.

to achive what you would like, you have to pre-process the SVG before submitting it.

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle1" cx="5" cy="5" r="4" stroke="blue" fill="blue" />

  <circle id="myCircle2" cx="15" cy="5" r="4" stroke="blue" fill="white" />

  <circle id="myCircle3" cx="25" cy="5" r="4" stroke="red" fill="white" />

</svg>

After that, rasterize the new SVG.

convert input.svg output.png

That should work.

2
Mark Setchell On

ImageMagick uses its own internal SVG reader if you do not configure and build it with a high quality SVG converter, such as rsvg. If you use rsvg, it renders your SVG perfectly.

Obviously you don't have rsvg support, but in general you can tell if you have rsvg support with:

magick identify -version

Version: ImageMagick 7.1.1-26 Q16-HDRI aarch64 21914 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC HDRI Modules OpenMP(4.5) 
Delegates (built-in): bzlib cairo fftw fontconfig freetype gslib heic jng jpeg jxl lcms ltdl lzma pangocairo png ps raw rsvg tiff webp x xml zlib zstd

and look through the list of delegates, which is in alphabetical order, and see if rsvg appears.

If you don't have it, either build a version with it by installing rsvg support with your OS's package manager, then installing ImageMagick from source, remembering to use the following at the configuring stage:

./configure --with-rsvg ...

or, more simply, use the alpine:latest docker image:

docker run -it alpine:latest
apk update && apk add imagemagick rsvg-convert

Or, as Fred suggests in the comments, you can just install Inkscape.