Skip to content

Instantly share code, notes, and snippets.

@tbmatuka
Last active Sep 26, 2021
Embed
What would you like to do?
Blurry lazy loading placeholder SVGs
<?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>';
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<?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>';
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment