Encoded SVG strings are parsed incorrectly on macOS

[pcclarke]

I'd like to convert a SVG string to a PNG image using Wand. On Linux, this works fine. On macOS, I'm consistently seeing black strokes and other changed styling that shouldn't be there. I have tried the same SVG files with MagickWand, and encountered no issues on either operating system. I describe the issue I'm encountering a little more on Stack Overflow.

What I've noticed is that the SVGs that Wand parses from a string have extra elements. For example, with this script:

from wand.image import Image

testsvg2 = '<svg width=\"10\" height=\"10\"><rect x=\"2\" y=\"2\" width=\"5\" height=\"5\" fill=\"#FFFFFF\"></rect></svg>'
with Image(blob=testsvg2.encode()) as img:
  img.save(filename='svg-blob.svg')
  with img.convert('png') as converted:
    converted.save(filename='png-blob.png')

The PNG image has a black border:

And the SVG now has an extra <g> element containing what I think is supposed to be default styling but I would guess it's causing the black border:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="10" height="10">
<g style="fill:black;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:1;fill-rule:nonzero;">
<g style="fill:#FFFFFF;">
  <rect x="2" y="2" width="5" height="5"/>
</g>
</g>
</svg>

The question is, why is Wand adding a black border? I'm seeing the same on other, more complex images but I can't understand why even on this simple example the black border is there.

My setup is:

• macOS Monterey 12.6
• Python 3.10.7
• Flask 2.2.2
• Wand 0.6.10
• ImageMagick 7.1.0-49 Q16-HDRI x86_64 2047
• Inkscape 1.2.1

[emcconville]

What I've noticed is that the SVGs that Wand parses from a string have extra elements.

Wand doesn't parse this data at all, but passes it to ImageMagick that attempts to detect what type of images was given, then passes to a coder / delegate to decode. For SVG, it can be rsvg, msvg, or inkscape.

And the SVG now has an extra element containing what I think is supposed to be default styling but I would guess it's causing the black border:

Correct. ImageMagick is a raster tool that can, through delegates, read vector source files. However the encoding chain will always be:

VECTOR => RASTER => VECTOR

Delegate tools like potrace & autotrace will get the raster to a vector, but the output vector will never 100% match the input vector.

The question is, why is Wand adding a black border?

I couldn't say, but I would guess it's a change between versions of inkscape.~~

The same black borders show up when calling inkscape directly.

echo '<svg width="10" height="10"><rect x="2" y="2" width="5" height="5" fill="#FFFFFF"></rect></svg>' | inkscape --export-filename=output.png --pipe

I would hazard that by omitting the SVG doctype headers, inkscape is simply populating default values. Perhaps by bug, or by a change in specs. But then again, I couldn't say. A lot has changed in the 5 years between 0.9.2 & 1.2.1.

Correction!

This could also be due to reading blob data, and not from a file. By passing a SVG fragment, it's possible to skip over portions of the delegates lookups, and result in ImageMagick selecting the internal SVG decoder. If you export MAGICK_DEBUG=All environment variable, and observer stderr for any instances of MSVG or svg.c path coders.

[emcconville]

Minor update

Try setting fill="#FFFFFF" attribute to fill="#FFFFFFFF", and see if that improves. This might be a side-effect from migrating from ImageMagick 6 to 7.

[pcclarke]

Unfortunately, changing the fill attribute didn't make much of a difference:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="10" height="10">
<g style="fill:black;fill-opacity:1;stroke:none;stroke-width:1;stroke-opacity:1;fill-rule:nonzero;">
<g style="fill:#FFFFFFFF;">
  <rect x="2" y="2" width="5" height="5"/>
</g>
</g>
</svg>

This could also be due to reading blob data, and not from a file.

That's correct. If I change my code to read the same SVG from a file, the image converts into what I would expect to see.

If you export MAGICK_DEBUG=All environment variable

I got MAGICK_DEBUG=All output three different ways for comparison:

• wand-blob_debug_all.txt: the above Python script reading the SVG as a blob. This does use Inkscape at one point, but subsequently uses MSVG and svg.c.
• wand-file_debug_all.txt: similar to the above Python script, but reading the SVG from a file. Works as expected. I only see Inkscape in here.
• magick-file_debug_all.txt: using the ImageMagick magick command to convert the SVG from a file. Works as expected. Again, only Inkscape is used.

So reading the SVG as a blob is definitely triggering a switch to MSVG, and it's only occurring that way. But I can't tell from the debug why this is happening.

and observer stderr for any instances of MSVG or svg.c path coders.

I tried setting up a handler to log stderr, but I'm not seeing anything. However, I might be too inexperienced with Python logging to be doing it correctly. Is there something you had in mind to observe stderr?