Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Layer imagick - SVG Support #288

Open
trevortos opened this issue Nov 1, 2021 · 1 comment
Open

Layer imagick - SVG Support #288

trevortos opened this issue Nov 1, 2021 · 1 comment

Comments

@trevortos
Copy link

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
@V13Axel
Copy link

V13Axel commented Mar 31, 2022

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):
image

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@V13Axel @trevortos