Displaying SVG in the lightbox, image is very small

[JPVRS]

As the title says, I have an SVG image that I'm trying to display in the lightbox. The image is sized pretty small and the zoom doesn't seem to be working. Any idea how I can get this to display like a regular image?

[igordanchenko]

I'm pretty sure the image is sized according to the width and height specified in the svg file. Zoom is probably disabled because the image is already at its "max zoom" level according to the maxZoomPixelRatio value (which is set to 1 by default). I'm just making a guess here, as there is no demo to troubleshoot...

You could probably increase maxZoomPixelRatio value, but that would affect all of your slides which isn't great.

What are your expectations of the zoom feature in this case? How would you determine reasonable "max zoom" level for svg files? How would you expect the lightbox to display svg images by default (at the initial zoom level)?

[JPVRS]

Good questions. I'd like the initial zoom level to fill the viewport (maybe with a reasonable amount of padding) and have the max zoom be maybe 2x the viewport size.

Increasing maxZoomPixelRatio might work for me... in this case the only slides are similar SVG images.

I would look into adjusting the width and height specified in the file itself, but I get the file in the form of a blob from an API response and this happens at scale.

[igordanchenko]

Part of the issue might be that the SVG is in the form of a "blob:" URL and not a raw SVG file.

You may need to update the if clause to match your use case. For example, if (isImageSlide(slide) && slide.src.startsWith("blob:"))

[JPVRS]

That gives me a different error, one that's odd considering that "copy image URL" gives me a URL starting with "blob:"

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'startsWith')

  229 | if (
  230 |   isImageSlide(slide) &&
> 231 |   slide.src.startsWith("blob:")
      |            ^
  232 | ) {
  233 |   return (
  234 |     <img

[igordanchenko]

That's odd... Can you add optional chaining:

slide.src?.startsWith("blob:")

[JPVRS]

The error goes away, but the Lightbox is empty.

[igordanchenko]

I guess it's time to see a repro. Can you clone the following sandbox and update it with your specific image to reproduce the issue?

https://codesandbox.io/p/devbox/yet-another-react-lightbox-sandbox-mgc04i

[JPVRS]

I seem to have found an acceptable solution by resizing the SVG programmatically as a percentage of the viewport width before passing it to the Lightbox.

[JPVRS]

Just following up on this to say that the reason I didn't create the repro was that I couldn't figure out an easy way to add the SVG blob part of the problem into the codesandbox. Since it's really easy to resize the SVG based on the viewport before passing it to the lightbox, I personally would consider this solved (in agreement with that being marked as the answer).