extra-php-extensions Layer imagick

Layer imagick - SVG Support

Open trevortos opened this issue 3 years ago • 1 comments

Where having issues rendering SVG files, and think it may have todo with imagemagic not being built with rsvg.

Is there a way we can get SVG build options added to the Docker build?

Im not sure if its --with-rsvg=yes or --with-librsvg

Nov 01 '21 22:11 trevortos

I've hit issues with rendering SVGs as well, and I've just spent some time tinkering with this to try and see if I could narrow it down.

Specifically, the problem comes about for me when using nested SVGs, which I am then converting to PNG. Here's the full text of an example SVG (Formatted for ease of seeing how it's nested):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="625" height="258">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="19px" y="112px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M6.5,16a9.5,9.5 0 1,0 19,0a9.5,9.5 0 1,0 -19,0"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="81px" y="112px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M19.43,5.86C21.79,7,24.5,9.7,24.5,16s-2.71,9-5.07,10.14a10.55,10.55,0,0,1-3.43.58A10.72,10.72,0,0,1,16,5.28,10.55,10.55,0,0,1,19.43,5.86Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="144px" y="112px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M17.79,5.45C20,6.3,23.5,8.77,23.5,15.88c0,7.37-3.75,9.87-5.95,10.71a9.92,9.92,0,0,1-1.55.13A10.72,10.72,0,0,1,16,5.28,10.54,10.54,0,0,1,17.79,5.45Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="206px" y="112px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M17.05,5.34c1.6.75,4.45,3.17,4.45,10.79,0,7.39-2.68,9.76-4.3,10.52a11.9,11.9,0,0,1-1.2.07A10.72,10.72,0,0,1,16,5.28,9,9,0,0,1,17.05,5.34Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="268px" y="112px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16.46,5.31c.95.78,3,3.34,3,10.69s-2.09,9.91-3,10.69l-.46,0A10.72,10.72,0,0,1,16,5.28Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="331px" y="112px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16.46,5.31c.95.78,3,3.34,3,10.69s-2.09,9.91-3,10.69l-.46,0A10.72,10.72,0,0,1,16,5.28Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="393px" y="112px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16.13,5.29c.37.89,1.37,3.92,1.37,10.79s-1,9.76-1.36,10.63H16A10.72,10.72,0,0,1,16,5.28Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="456px" y="112px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16,26.72A10.72,10.72,0,0,1,16,5.28Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="518px" y="112px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M14.5,16.08c0,6.84,1,9.77,1.36,10.63a10.71,10.71,0,0,1,0-21.42C15.5,6.17,14.5,9.2,14.5,16.08Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="580px" y="112px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M15.55,26.7a10.71,10.71,0,0,1,0-21.4c-1,.78-3.05,3.34-3.05,10.7S14.6,25.92,15.55,26.7Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="19px" y="166px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M15.55,26.7a10.71,10.71,0,0,1,0-21.4c-1,.78-3.05,3.34-3.05,10.7S14.6,25.92,15.55,26.7Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="81px" y="166px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M14.81,26.65A10.72,10.72,0,0,1,15,5.33c-1.59.76-4.45,3.17-4.45,10.8C10.5,23.53,13.19,25.9,14.81,26.65Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="144px" y="166px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M14.46,26.6a10.71,10.71,0,0,1-.24-21.16C12,6.29,8.5,8.76,8.5,15.88,8.5,23.26,12.27,25.76,14.46,26.6Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="206px" y="166px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M12.6,26.19a10.73,10.73,0,0,1,0-20.35C10.23,7,7.5,9.67,7.5,16s2.73,9,5.1,10.16Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="268px" y="166px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d=""/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="331px" y="166px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d=""/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="393px" y="166px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M19.4,26.16C21.77,25,24.5,22.33,24.5,16S21.77,7,19.4,5.84a10.71,10.71,0,0,1,0,20.32Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="456px" y="166px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M17.54,26.6c2.19-.84,6-3.34,6-10.72,0-7.12-3.5-9.59-5.72-10.44a10.71,10.71,0,0,1-.24,21.16Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="518px" y="166px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M17.19,26.65c1.62-.75,4.31-3.12,4.31-10.52,0-7.63-2.86-10-4.45-10.8a10.72,10.72,0,0,1,.14,21.32Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="580px" y="166px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M17.19,26.65c1.62-.75,4.31-3.12,4.31-10.52,0-7.63-2.86-10-4.45-10.8a10.72,10.72,0,0,1,.14,21.32Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="19px" y="221px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16.45,26.7c.95-.78,3.05-3.34,3.05-10.7S17.4,6.08,16.45,5.3a10.71,10.71,0,0,1,0,21.4Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="81px" y="221px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16.14,26.71c.37-.86,1.36-3.79,1.36-10.63s-1-9.91-1.37-10.79a10.71,10.71,0,0,1,0,21.42Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="144px" y="221px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16,26.72V5.28a10.72,10.72,0,0,1,0,21.44Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="206px" y="221px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16,26.72h-.14c-.37-.86-1.36-3.79-1.36-10.63s1-9.91,1.37-10.79H16a10.72,10.72,0,0,1,0,21.44Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="268px" y="221px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16,26.72h-.14c-.37-.86-1.36-3.79-1.36-10.63s1-9.91,1.37-10.79H16a10.72,10.72,0,0,1,0,21.44Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="331px" y="221px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16,26.72l-.45,0c-1-.78-3.05-3.34-3.05-10.7s2.1-9.92,3.05-10.7l.45,0a10.72,10.72,0,0,1,0,21.44Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="393px" y="221px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16,26.72a11.7,11.7,0,0,1-1.19-.07c-1.62-.75-4.31-3.12-4.31-10.52,0-7.63,2.86-10,4.45-10.8.35,0,.7,0,1.05,0a10.72,10.72,0,0,1,0,21.44Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="456px" y="221px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16,26.72a11.16,11.16,0,0,1-1.54-.12c-2.19-.84-6-3.34-6-10.72,0-7.12,3.5-9.59,5.72-10.44A10.43,10.43,0,0,1,16,5.28a10.72,10.72,0,0,1,0,21.44Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="518px" y="221px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16,26.72a10.63,10.63,0,0,1-3.4-.56C10.23,25,7.5,22.33,7.5,16s2.73-9,5.1-10.16A10.72,10.72,0,1,1,16,26.72Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="24.96px" height="24.96px" viewBox="0 0 32 32" x="580px" y="221px">
        <circle cx="16" cy="16" r="10" fill="#1882c7" />
        <path fill="#05f000" d="M16,26.72a10.63,10.63,0,0,1-3.4-.56C10.23,25,7.5,22.33,7.5,16s2.73-9,5.1-10.16A10.72,10.72,0,1,1,16,26.72Z"/>
        <circle cx="16" cy="16" r="10" stroke="black" stroke-width="1.5" fill="none" />
    </svg>
</svg>

You can easily test what I'm hitting with the following:

$im = new Imagick();
$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->readImageBlob($theAboveSVG);
$im->setImageFormat('png32');
$im->writeImage('/some/test/image/location.png');

The way it renders on my development machine, and what I would expect from bref, is this (One big SVG container, with a bunch of smaller SVG circles in it, placed in a grid): 2022-03-30_21-42

But instead, they all pile up in the corner like so (ignore the bg, it's irrelevant):

Unfortunately, it doesn't appear to be as simple as compiling with --with-rsvg=yes or similar - In either case, convert -list configure | grep svg indicates that it's already enabled, yet running convert -list format | grep SVG lists MSVG, SVG, and SVGZ: 2022-03-30_21-47

As opposed to my primary development machine, which lists MSVG, RSVG, SVG, and SVGZ: 2022-03-30_21-48

I've got no knowledge of how to find out which one it's using to do the actual SVG conversion to PNG that I'm trying to accomplish... But I suspect that to be relevant.

Additionally, it also seems like the container is running ImageMagick 6.9.10, despite the Dockerfile explicitly downloading/installing 7.0.10-43. I can't help but wonder if the difference in version might also have something to do with it.

In any case, I'm at my wits' end here, but would be happy to help anyone troubleshoot so I can get this renderer I'm building up and running on Lambda via Bref.

I'm not really sure who would be best to talk to ... Based on git blame alone, it seems maybe @Nyholm @peldax or @chekalsky would be the ones most likely to know where to start?

Mar 31 '22 02:03 V13Axel

extra-php-extensions extra-php-extensions copied to clipboard

Layer imagick - SVG Support

extra-php-extensions
extra-php-extensions copied to clipboard