SVG to PNG pattern image repeat issue

IMagick is a native PHP extension to create and modify images using the ImageMagick API. ImageMagick Studio LLC did not write nor does it maintain the IMagick extension, however, IMagick users are welcome to discuss the extension here.
Post Reply
Csi
Posts: 3
Joined: 2019-06-01T00:23:35-07:00
Authentication code: 1152

SVG to PNG pattern image repeat issue

Post by Csi » 2019-06-01T00:41:43-07:00

Hello,

I would convert a SVG file to a PNG file with Imagick PHP. I use the command line and the generated image file is ok except for the patterns images : the repeat seems to not be exact and we can see 1 or 2 pixels space beetwen repeat bloc image.

On Chrome browser the SVG render is perfect. And I have tested with RSVG and Inkscape: same problem...

Here you can find some pictures to illustrate : (please open it in full size to view the issue)
Expected render in Chrome : Image
Imagick render : Image
Inkscape (look at the star the 1 pixel black lines) : Image
RSVG (repeat position is right but not the last text border and the image shadow blur) : Image

Is it a bug ? An error in my SVG syntax ?

Thanks for your help

Clement

Configuration :
PHP Version 7.1.27-1+0~20190307202204.14+stretch~1.gbp7163d5
imagick module version 3.4.3
imagick classes Imagick, ImagickDraw, ImagickPixel, ImagickPixelIterator, ImagickKernel
Imagick compiled with ImageMagick version ImageMagick 6.9.7-4 Q16 x86_64 20170114

snibgo
Posts: 11694
Joined: 2010-01-23T23:01:33-07:00
Authentication code: 1151
Location: England, UK

Re: SVG to PNG pattern image repeat issue

Post by snibgo » 2019-06-01T01:03:20-07:00

Csi wrote:Is it a bug ? An error in my SVG syntax ?
You haven't shown your SVG.

The SVG standard doesn't mandate exact outputs, so two SVG renderers that both comply with the standard can make different outputs. SVG code written to look "correct" with one renderer can look "wrong" on another.
snibgo's IM pages: im.snibgo.com

Csi
Posts: 3
Joined: 2019-06-01T00:23:35-07:00
Authentication code: 1152

Re: SVG to PNG pattern image repeat issue

Post by Csi » 2019-06-01T01:44:51-07:00

@snibgo thanks for your reply

Sorry, you can find the original svg here : https://www.prima-cms.com/2629.svg

(Doesn't matter with the light wide order around the picture, I delete it in my code juste before run the convert)

I have already try to change the pattern values (without any knowledge) to find if the render behavior were affected, without success.

Thanks

snibgo
Posts: 11694
Joined: 2010-01-23T23:01:33-07:00
Authentication code: 1151
Location: England, UK

Re: SVG to PNG pattern image repeat issue

Post by snibgo » 2019-06-01T03:23:32-07:00

In the SVG, the height is 1500.6242197253434 pixels. Renderers will round this to 1501 pixels, creating a gap of about 0.38 pixels somewhere. Similarly, there are many other floating-point numbers, and these will cause differences due to varying precision and algorithms.

For example, the gold.jpg pattern can be simplified if you create a larger raster image and use that, so it doesn't need to be repeated.

Code: Select all

magick gold.jpg +clone +append +clone -append +repage g2x2.jpg
Then replace the SVG lines with:

Code: Select all

<pattern id="SVGID_14" x="0" y="0" width="1" height="1">
<image x="0" y="0" width="320" height="320" xlink:href="g2x2.jpg"></image>
</pattern>
snibgo's IM pages: im.snibgo.com

Csi
Posts: 3
Joined: 2019-06-01T00:23:35-07:00
Authentication code: 1152

Re: SVG to PNG pattern image repeat issue

Post by Csi » 2019-06-01T04:21:50-07:00

@snibgo thanks for your replay

Good idea, I will search in this way. I can easily modify the svg render and I will change all float pixel number to round.

I will repost here the result.

Post Reply