Interesting shrinking behavior with svg images

@spinningarrow I’m using this as a plugin and it works great, thank you! However, I did notice some odd behavior with SVG used as <img src="image.svg" data-action="zoom" width="1024" height="768" />.

See attached GIF example, the first image “Hill Valley” is PNG, the second “Mountain Valley” is SVG and they use the same repeating HTML template and attributes, the only difference is their image format.

I inspected in Dev Tools and see transform: scale3d() injected into the dynamic.zoom-img-wrap img.zoom-img element:

• For .png @ 1366px viewport: scale3d(1.25586, 1.25586, 1.25586)
• For .svg @ 1366px viewport: scale3d(0.209961, 0.209961, 0.209961)

Why would they be off by “1”?

With the obvious benefits of SVG in various sizes, it seems this plugin would shine! I thought it could be the viewBox size in the SVG file, but the artboards export dimensions are viewBox="0 0 1024 768"

Any ideas on a workaround for SVG?

[miguelpppires]

if you deselect the “responsive” option while you are exporting the svg, it works fine.

[zachlyon]

@MikeStardust - That was it!

Also, I compared the Norway flag SVG from the codepen with my SVGs and I see an explicit width and height attributes set, where mine only had viewBox dimensions.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 768"> ... </svg>

versus

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1024" height="768" viewBox="0 0 1024 768"> ... </svg>

I verified that SVGs from Illustrator’s “Export for Screens” now contain width and height if un-checking “Responsive”.