Blurry lazy loading placeholder SVGs

DoubleImage.php

<?php

function generatePlaceholderSvg(string $originalImageBinary, string $placeholderImageBinary, ?string $idSuffix = null): string
    {
        $originalImageSizeInfo = getimagesizefromstring($originalImageBinary);

        if (!is_array($originalImageSizeInfo) || !isset($originalImageSizeInfo[3])) {
            throw new \RuntimeException('Unable to get image size info.');
        }

        $originalImageSizeString = $originalImageSizeInfo[3];

        $placeholderImageSizeInfo = getimagesizefromstring($placeholderImageBinary);

        if (!is_array($placeholderImageSizeInfo) || !isset($placeholderImageSizeInfo[0], $placeholderImageSizeInfo[1])) {
            throw new \RuntimeException('Unable to get image size info.');
        }

        $placeholderImageWidth = $placeholderImageSizeInfo[0];
        $placeholderImageHeight = $placeholderImageSizeInfo[1];

        $encodedImage = 'data:'.$binaryPlaceholder->getMimeType().';base64,'.base64_encode($placeholderImageBinary);

        if ($idSuffix === null) {
            $idSuffix = substr(md5($placeholderImageBinary), 0, 5);
        }

        return '<svg viewBox="0 0 '.$placeholderImageWidth.' '.$placeholderImageHeight.'" '.$originalImageSizeString.' style="width: 100%;height: auto">'
            .'<filter id="b'.$idSuffix.'">'
                .'<feGaussianBlur in="SourceGraphic" stdDeviation="0.5" />'
            .'</filter>'

            .'<symbol id="i'.$idSuffix.'" viewBox="0 0 '.$placeholderImageWidth.' '.$placeholderImageHeight.'">'
                .'<image href="'.$encodedImage.'"/>'
            .'</symbol>'

            .'<g filter="url(#b'.$idSuffix.')">'
                .'<use width="'.($placeholderImageWidth + 2).'" height="'.($placeholderImageHeight + 2).'" x="-1" y="-1" href="#i'.$idSuffix.'"/>'
                .'<use href="#i'.$idSuffix.'"/>'
            .'</g>'
          .'</svg>';
    }

DoubleImage.svg

OutlinedImage.php

<?php

function generatePlaceholderSvg(string $originalImageBinary, string $placeholderImageBinary, ?string $idSuffix = null): string
    {
        $originalImageSizeInfo = getimagesizefromstring($originalImageBinary);

        if (!is_array($originalImageSizeInfo) || !isset($originalImageSizeInfo[3])) {
            throw new \RuntimeException('Unable to get image size info.');
        }

        $originalImageSizeString = $originalImageSizeInfo[3];

        $placeholderImageSizeInfo = getimagesizefromstring($placeholderImageBinary);

        if (!is_array($placeholderImageSizeInfo) || !isset($placeholderImageSizeInfo[0], $placeholderImageSizeInfo[1])) {
            throw new \RuntimeException('Unable to get image size info.');
        }

        $placeholderImageWidth = $placeholderImageSizeInfo[0];
        $placeholderImageHeight = $placeholderImageSizeInfo[1];

        $encodedImage = 'data:'.$binaryPlaceholder->getMimeType().';base64,'.base64_encode($placeholderImageBinary);

        if ($idSuffix === null) {
            $idSuffix = substr(md5($placeholderImageBinary), 0, 5);
        }

        return '<svg viewBox="0 0 '.($placeholderImageWidth - 2).' '.($placeholderImageHeight - 2).'" '.$originalImageSizeString.' style="width: 100%;height: auto">'
            .'<filter id="b'.$idSuffix.'">'
                .'<feGaussianBlur in="SourceGraphic" stdDeviation="0.5" />'
            .'</filter>'

            .'<image width="'.($placeholderImageWidth).'" height="'.($placeholderImageHeight).'" x="-1" y="-1" filter="url(#b'.$idSuffix.')" href="'.$encodedImage.'"/>'
          .'</svg>';
    }

OutlinedImage.svg

<svg viewBox="0 0 16 9" width="1080" height="608" style="width: 100%;height: auto">
    <filter id="b1">
        <feGaussianBlur in="SourceGraphic" stdDeviation="0.5"/>
    </filter>

    <image width="18" height="11" x="-1" y="-1" filter="url(#b1)" href="data:image/png;base64,..."/>
</svg>