SVG scaling issue in Chrome/Firefox when using <img> tag with Viewer.js

[isospin]

When using Viewer.js (specifically with <img> tags pointing to .svg files), SVGs are displayed with an incorrect initial width (often 300px) in Chrome and Firefox, while Safari renders them correctly, filling the viewport (contain behavior). This occurs despite the <img> tag having width and height attributes.

Problem:
When an SVG is loaded via an <img> tag and opened in Viewer.js, Chrome and Firefox seem to default to a smaller width (e.g., 300px) for the SVG within the Viewer's canvas. Safari, however, correctly scales the SVG to fit the available space, respecting a "contain" like behavior. This leads to an inconsistent user experience across browsers.

Steps to Reproduce:

1. HTML Structure:

   <img src="/path/to/your/image.svg" width="2400" height="2000" class="zoomme" data-original="/path/to/your/image.svg">  

2. JavaScript (Viewer.js Initialization):

   const zoomableImages = document.querySelectorAll('img.zoomme');  
   if (zoomableImages) {  
       zoomableImages.forEach(img => {  
           const singleViewer = new Viewer(img, {  
               inline: false,  
               navbar: false,  
               title: false,  
               toolbar: {  
                   zoomIn: true,  
                   zoomOut: true,  
                   oneToOne: false,  
                   reset: true,  
                   prev: false,  
                   play: false,  
                   next: false,  
                   rotateLeft: false,  
                   rotateRight: false,  
               },  
               mouseWheel: true,  
               zoomRatio: 0.5,  
               minZoomRatio: 0.3,  
               maxZoomRatio: 4,  
               initialCoverage: 0.95,  
           });  
   
           img.addEventListener('click', () => {  
               singleViewer.show();  
           });  
   
           const zoomIcon = img.parentElement.querySelector('.zoom-trigger');  
           if (zoomIcon) {  
               zoomIcon.addEventListener('click', () => {  
                   singleViewer.show();  
               });  
           }  
       });  
   }  

3. Observe:

   • Open the page in Chrome or Firefox. Click on the SVG image to open it in Viewer.js. The SVG appears small (e.g., 300px wide) within the viewer.
   • Open the page in Safari. Click on the SVG image. The SVG scales correctly to fill the viewer, maintaining its aspect ratio.

Expected Behavior:
SVGs should scale to fit the Viewer.js canvas, respecting the initialCoverage option and behaving consistently across all modern browsers (Chrome, Firefox, Safari), similar to how Safari currently handles it.

Environment:

• Viewer.js Version: v1.11.7
• Operating System: macOS, Windows 11

Possible Cause / Suggestion:
It seems Viewer.js might not be correctly interpreting or applying the intrinsic dimensions of SVGs (or the viewBox attribute) when creating the <img> element within its canvas, leading to browser-specific default sizing in Chrome/Firefox. Perhaps a more robust handling of SVG dimensions or a default "contain" behavior for SVGs within the Viewer's internal <img> element could resolve this.