ImageMagick not applying svg filters while convert

2019-07-23 16:48发布

问题:

Can someone help identify the problem here. Consider this SVG markup.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="446.5 158 967 368">
    <defs>
        <filter color-interpolation-filters="sRGB" id="Sil2df3ui1g5" filterUnits="userSpaceOnUse">
            <feGaussianBlur stdDeviation="2" in="SourceAlpha"/>
            <feOffset result="offsetblur" dy="10" dx="10"/>
            <feFlood flood-color="orange"/>
            <feComposite operator="in" in2="offsetblur"/>
            <feComponentTransfer>
                <feFuncA slope="1" type="linear"/>
            </feComponentTransfer>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <g>
        <g>
            <text stroke="#8f02d0" id="fsjd" fill="#00a7f2" transform="matrix(2.39,0,0,2.39,-1280.19,-438.545)" style="font-size: 60px; text-anchor: middle; stroke-linejoin: round; filter:url('#Sil2df3ui1g5'); font-weight: 400; font-style: normal; letter-spacing: 0px; stroke-width: 2;" y="333" x="921">Lorem</text>
            <text transform="matrix(1,0,0,1,-398,-145)" fill="#dd0000" style="font-size: 32px; text-anchor: middle; font-family: Ubuntu; font-style: normal; font-weight: 400; letter-spacing: 0px;" y="333" x="921">Safe Mode</text>
            <text transform="matrix(1,0,0,1,416,185)" fill="#179c00" style="font-size: 32px; text-anchor: middle; font-family: Ubuntu; font-style: normal; font-weight: 400; letter-spacing: 0px;" y="333" x="921">Safe Mode</text>
        </g>
    </g>
</svg>

When I try to convert this svg to png via ImageMagick :

convert -background none item.svg item.png

Filters are not applied

However, If I use any other svg(generated by Inkscape/AI etc..) It converts successfully. I guess something is wrong with SVG markup.

回答1:

Where you specify the IRI for your filter, do not use single quotes.

Change this

filter:url('#Sil2df3ui1g5');

to

filter:url(#Sil2df3ui1g5);

At least on my machine, this fixes the problem.

According to the W3C validator, single quotes should be OK, seems like a bug in ImageMagick.