fix: responsive svg images (#2583)

niklasvh · Jul 14, 2021 · 92fa448 · 92fa448
1 parent 1acdc82
commit 92fa448
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/dom/replaced-elements/svg-element-container.ts b/src/dom/replaced-elements/svg-element-container.ts
@@ -1,5 +1,6 @@
 import {ElementContainer} from '../element-container';
 import {CacheStorage} from '../../core/cache-storage';
+import {parseBounds} from '../../css/layout/bounds';
 
 export class SVGElementContainer extends ElementContainer {
     svg: string;
@@ -9,6 +10,10 @@ export class SVGElementContainer extends ElementContainer {
     constructor(img: SVGSVGElement) {
         super(img);
         const s = new XMLSerializer();
+        const bounds = parseBounds(img);
+        img.setAttribute('width', `${bounds.width}px`);
+        img.setAttribute('height', `${bounds.height}px`);
+
         this.svg = `data:image/svg+xml,${encodeURIComponent(s.serializeToString(img))}`;
         this.intrinsicWidth = img.width.baseVal.value;
         this.intrinsicHeight = img.height.baseVal.value;

diff --git a/tests/reftests/images/svg/native_only.html b/tests/reftests/images/svg/native_only.html
@@ -34,7 +34,7 @@
                   style="fill:#40aa54;fill-opacity:1;stroke:#20552a;stroke-width:7.99999952;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
         </g>
     </svg>
-    <svg width="240" height="160" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
+    <svg width="50%" height="75%" viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
         <text x="40" y="20" class="html">html</text>
         <text x="55" y="25" class="two">2</text>
         <text x="65" y="35" class="canvas">canvas</text>