在 PHP 中使用 Imagick 将 svg 转换为 png 时出现奇怪的裁剪问题

Question

I am trying to convert a bunch of svg images into png. Below is the snippet of the Imagick part:

$im = new Imagick();
$im->setBackgroundColor(new ImagickPixel($options->iconsBgColor)); //$options->iconsBgColor is like #00ff00
$im->readImageBlob( $svg );
$im->setImageResolution(288,288);
$im->resizeImage(512, 512, imagick::FILTER_LANCZOS, 1);
$im->setImageFormat( "png32" );
$im->setImageCompression(\Imagick::COMPRESSION_UNDEFINED);
$im->setImageCompressionQuality(0);
$im->writeImage( $imageSrcPngDir );
$im->clear();
$im->destroy();

This mostly works as expected. But in the images where there is a big white space on top and bottom of the images, it gets cropped on the bottom in the png file. Like in the example below:

Here is the svg for the above png:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg filter="url(#shadow)" style="width:512px; height:512px;" xmlns="http://www.w3.org/2000/svg" viewBox="-215 -215 942 942">
    <defs>
        <style type="text/css">.cls-1{fill:none;stroke:#0000ff;stroke-miterlimit:10;stroke-width:18px;}</style>
        <filter id="shadow" x="0" y="0" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="11.636363636364"/>
            <feOffset dx="17.454545454546" dy="17.454545454546" result="offsetblur"/>
            <feFlood flood-color="#04040C" flood-opacity="1"/>
            <feComposite in2="offsetblur" operator="in"/>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <title>imdb-icon</title>
    <g id="imdb-icon">
        <g id="imdb-icon-2" data-name="imdb-icon">
            <path class="cls-1" d="M506,327.03028v-92.721c-4.04258-27.411-33.82293-27.27624-33.82293-27.27624-15.82225-.146-26.0971,6.27726-32.20589,12.24007V157.67979H386.74382v193.606h48.7356a24.443,24.443,0,0,1,1.97638-11.88071c5.6147,6.513,16.4735,15.08106,34.72127,14.91266C472.17707,354.31776,506,354.32222,506,327.03028Zm-48.91524-15.96816a12.39325,12.39325,0,0,1-12.39722,12.39722H437.9499V236.13963h6.73764a12.39321,12.39321,0,0,1,12.39722,12.39723Z"/>
            <path class="cls-1" d="M339.32932,157.6843H250.7142V351.31552h88.61512a31.23974,31.23974,0,0,0,31.2418-31.2418V188.92611A31.23971,31.23971,0,0,0,339.32932,157.6843ZM320.94825,303.87277a15.40325,15.40325,0,0,1-15.40086,15.41087h-3.80027V191.73627h3.80027a15.40328,15.40328,0,0,1,15.40086,15.41086Z"/>
            <polygon class="cls-1" points="233.833 157.68 233.833 351.286 189.062 351.286 189.062 228.346 170.151 351.286 139.978 351.286 120.944 227.538 120.944 351.286 74.185 351.286 74.185 157.68 141.191 157.68 154.666 245.28 168.141 157.68 233.833 157.68"/>
            <rect class="cls-1" x="6" y="157.67984" width="53.15995" height="193.63967"/>
        </g>
    </g>
</svg>

Now when I reduce the padding on the top and bottom by increasing the size of the drawing by manipulating the viewBox attribute, the image renders as expected, like shown below.

Below is the svg for the above png (this is working as expected):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg filter="url(#shadow)" style="width:512px; height:512px;" xmlns="http://www.w3.org/2000/svg" viewBox="-31 -31 573 573">
    <defs>
        <style type="text/css">.cls-1{fill:none;stroke:#0000ff;stroke-miterlimit:10;stroke-width:18px;}</style>
        <filter id="shadow" x="0" y="0" width="200%" height="200%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="11.636363636364"/>
            <feOffset dx="17.454545454546" dy="17.454545454546" result="offsetblur"/>
            <feFlood flood-color="#04040C" flood-opacity="1"/>
            <feComposite in2="offsetblur" operator="in"/>
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <title>imdb-icon</title>
    <g id="imdb-icon">
        <g id="imdb-icon-2" data-name="imdb-icon">
            <path class="cls-1" d="M506,327.03028v-92.721c-4.04258-27.411-33.82293-27.27624-33.82293-27.27624-15.82225-.146-26.0971,6.27726-32.20589,12.24007V157.67979H386.74382v193.606h48.7356a24.443,24.443,0,0,1,1.97638-11.88071c5.6147,6.513,16.4735,15.08106,34.72127,14.91266C472.17707,354.31776,506,354.32222,506,327.03028Zm-48.91524-15.96816a12.39325,12.39325,0,0,1-12.39722,12.39722H437.9499V236.13963h6.73764a12.39321,12.39321,0,0,1,12.39722,12.39723Z"/>
            <path class="cls-1" d="M339.32932,157.6843H250.7142V351.31552h88.61512a31.23974,31.23974,0,0,0,31.2418-31.2418V188.92611A31.23971,31.23971,0,0,0,339.32932,157.6843ZM320.94825,303.87277a15.40325,15.40325,0,0,1-15.40086,15.41087h-3.80027V191.73627h3.80027a15.40328,15.40328,0,0,1,15.40086,15.41086Z"/>
            <polygon class="cls-1" points="233.833 157.68 233.833 351.286 189.062 351.286 189.062 228.346 170.151 351.286 139.978 351.286 120.944 227.538 120.944 351.286 74.185 351.286 74.185 157.68 141.191 157.68 154.666 245.28 168.141 157.68 233.833 157.68"/>
            <rect class="cls-1" x="6" y="157.67984" width="53.15995" height="193.63967"/>
        </g>
    </g>
</svg>

I have compared the 2 svg files and viewBox is the only thing that is different.

Any idea how can I resolve this?

Answer 1

Ok, my suspicions about the altered viewBox were unfounded. That looks okay.

But what is up with the filter effect you are adding? You didn't mention that. It's basically an unconfigured/misconfigured drop shadow filter. But it is missing a lot of attributes. For example stdDeviation is not set in the <feGaussianBlur> filter element. It's possible that ImageMagick does not like that. Does it still clip when you remove the filter from the SVG (ie remove filter="url(#shadow)" )?

Answer 2

Increasing the height of the filter area from 200% to 300% resolved the issue.

<filter id="shadow" x="0" y="0" width="200%" height="300%">