search

francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium
https://medium-zoom.francoischalifour.com
MIT License
3.65k stars 165 forks source link

SVG images shrink instead of expand #52

Closed garviand closed 6 years ago

garviand commented 6 years ago

Love the plugin, thanks for all of your work.

I have a mix of SVGs and PNGs on my site, and the PNGs are expanding beautifully, but when the SVG images are clicked they actually get smaller.

Let me know if you have run into this before.

francoischalifour commented 6 years ago

Hi, are you talking about an img element having a SVG as a source (src)?

The library hasn't been thought with this in mind. I'm not sure how different the img element behaves with a PNG and a SVG.

I will investigate in the next days or if you want to get involved, feel free to do so 🙂

francoischalifour commented 6 years ago

I reproduced this issue in a sandbox.

The reason of this behavior is because a SVG doesn't handle its naturalWidth and naturalHeight the same way as a PNG or a JPG.

Since a SVG cannot pixelize, a solution could be to consider that its full size is the screen size. You could then adjust the zoom with margins.

What do you think @garviand?

btlewan commented 6 years ago

The natural width of SVG images varies across browsers, because they don't use the viewbox settings for sizing purposes. Even with commit 104f18b, zoomed SVGs appear smaller in Chrome than unzoomed images (unless they're smaller than 300x150).

I think it would be better to use the viewport width/height for SVGs in all cases. I'll see about creating a PR to that effect.

francoischalifour commented 6 years ago

The referenced commit should solve this issue since it's based on the viewport. You can check the behavior on this story.

Note that I haven't released it yet.

btlewan commented 6 years ago

I've just tried the released version, and it works! Thanks very much for the update.