Strange cropping issue while converting svg to png using Imagick in PHP

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

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%">

Advertisement

Answer