Zoom doesn't work with svg

[jeet-pixxel]

Hi, not sure if this is supposed to work this way. PNG images open and zoom fine, but SVG images are not zoomable at all. Any solution?

[tIsGoud]

Maybe related, some svg files work fine like the files generated by Excalidraw but the files generated by Mermaid are even smaller in GLightBox than what is displayed normally.

[jeet-pixxel]

Could be. My SVG files are plantUML generated.

[bocytko]

I had the same issue with SVGs from Google Slides (very small view). I checked what Excalidraw writes into the SVG – seems that it sets width and height attributes for svg explicitly. After doing the same in the affected SVG, I got a proper, zoomed preview.

very small image

<svg version="1.1" viewBox="0.0 0.0 960.0 540.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

normal size image

<svg version="1.1" viewBox="0.0 0.0 960.0 540.0" width="960" height="540" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

2x image

<svg version="1.1" viewBox="0.0 0.0 960.0 540.0" width="1920" height="1080" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

[mbraakhekke]

I have the same issue, also with PlantUML generated diagrams. I checked: the SVG sets width and height explicitly, that's not it. @bocytko: the examples you posted don't give me any visible image at all.

I looked around a bit: it doesn't seem that this is a problem of the underlying GLightbox javascript library.

[mbraakhekke]

SVGs generated by Excalidraw also don't work for me, e.g.:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 367.2000732421875 213.60000610351562" width="367.2000732421875" height="213.60000610351562"><!-- svg-source:excalidraw --><metadata></metadata><defs><style class="style-fonts">
      </style></defs><rect x="0" y="0" width="367.2000732421875" height="213.60000610351562" fill="#ffffff"></rect><g stroke-linecap="round" transform="translate(10 10) rotate(0 173.60003662109375 96.80000305175781)"><path d="M32 0 C122.22 2.23, 214.48 0.12, 315.2 0 C339.36 0.86, 346.26 9.48, 347.2 32 C347.72 63.04, 342.55 91.07, 347.2 161.6 C347.08 183.59, 340.1 196.2, 315.2 193.6 C222.93 196.02, 133.94 197.69, 32 193.6 C14.23 197.11, -2.66 180.36, 0 161.6 C2.94 126.01, 2.56 92.32, 0 32 C-0.35 7.99, 8.79 -1.98, 32 0" stroke="none" stroke-width="0" fill="#a5d8ff"></path><path d="M32 0 C140.36 -1.68, 247.64 -0.51, 315.2 0 M32 0 C144.8 1.91, 255.88 2.21, 315.2 0 M315.2 0 C338.44 -0.79, 348.32 10.7, 347.2 32 M315.2 0 C335.12 1.99, 347.78 11.19, 347.2 32 M347.2 32 C347.05 60.1, 344.72 88.02, 347.2 161.6 M347.2 32 C346.86 71.14, 347.26 110.62, 347.2 161.6 M347.2 161.6 C348.71 184.82, 337.93 193.78, 315.2 193.6 M347.2 161.6 C348.06 181.55, 335.26 192.64, 315.2 193.6 M315.2 193.6 C243.48 193.24, 169.08 191.34, 32 193.6 M315.2 193.6 C226.39 193.98, 139.41 194.87, 32 193.6 M32 193.6 C11.69 195.57, 0.2 183.52, 0 161.6 M32 193.6 C8.95 193.57, 0.2 181.37, 0 161.6 M0 161.6 C0.14 114.8, -0.65 71.35, 0 32 M0 161.6 C-1.3 135.3, 0.07 107.39, 0 32 M0 32 C0.87 9.78, 11.07 -0.37, 32 0 M0 32 C-1.78 8.74, 12.19 0.67, 32 0" stroke="#1e1e1e" stroke-width="2" fill="none"></path></g></svg>