SVG size issue

[fritzlaszlo]

Heya, first of all: Thanks for this fantastic plugin.

While trying it out with the editor, I realized some SVGs cause scaling problems in the annotator preview:

The editor used an svg export from illustrator. A simple map.

The head of the SVG with the viewbox looks like this: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.95 498.3">

Now when I gave the SVG some height in the Inspector, it worked again:

So of course this could be solved with changed properties inside the SVG, but since this file might be changed or updated from time to time by the editors, I tried to find a css-only solution. This is where I am right now: All elements inside the annotator inherit width: 100% apart from .annotator-ctn .image-ctn, which only has:

 {
    max-width: 100%;
}

If I change this to width instead of max-width, the image scales to visibility But due to its dimensions ("Portrait mode" so to say), the values max-height: calc(100vh - 12rem); are keeping it cropped. If i remove it, the image is of course huge, but seem to work fine.

I can imagine the max-heights are there for a reason, but so far that was my try on tackling this issue.

Cheers and thanks, Fritz

[Matoseb]

Hi, got the same issue.

The fix: you need to have the attributes width and height defined in the svg: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.95 498.3" width="420" height="498">

In Adobe Illustrator you can untick the "responsive" svg setting. Or you could add a file hook to add the missing attributes to svg elements:

function updateSvgDimensions($file)
{
    $svgContent = $file->read();

    $dom = new DOMDocument();
    $dom->loadXML($svgContent);

    $svgTag = $dom->getElementsByTagName('svg')->item(0);
    $width = $svgTag->getAttribute('width');
    $height = $svgTag->getAttribute('height');
    $viewBox = $svgTag->getAttribute('viewBox');

    // If width and height are missing, calculate them from viewBox
    if (empty($width) && empty($height) && !empty($viewBox)) {
        $viewBoxValues = explode(' ', $viewBox);
        if (count($viewBoxValues) === 4) {
            $width = round($viewBoxValues[2]);
            $height = round($viewBoxValues[3]);

            $svgTag->setAttribute('width', $width);
            $svgTag->setAttribute('height', $height);

            // Save the modified SVG
            $updatedSvg = $dom->saveXML();
            file_put_contents($file->root(), $updatedSvg);
        }
    }
}

Kirby::plugin('yourplugin/svgsanitize', [

    'hooks' => [
        'file.create:after' => function ($file) {
            if ($file->extension() === 'svg') {
                updateSvgDimensions($file);
            }
        },
        'file.replace:after' => function ($newFile, $oldFile) {
            if ($newFile->extension() === 'svg') {
                updateSvgDimensions($newFile);
            }
        },
    ],

});