Synthesize preserveAspectRatio='none' for SVGs embedded in <img> without viewBox

Ahmad-S792 · Ahmad Saleem · commit 2f7f2a116886 · 2026-01-01T09:53:51.000-08:00
https://bugs.webkit.org/show_bug.cgi?id=304669 rdar://167121931 Reviewed by Nikolas Zimmermann. When an SVG is embedded through SVGImage (e.g., in an <img> tag) and has fixed width/height attributes but no explicit viewBox, WebKit synthesizes a viewBox matching the SVG's intrinsic dimensions. However, this alone causes the SVG to preserve its aspect ratio and center within the <img> container, which differs from Chrome and Firefox behavior. Chrome and Firefox stretch the SVG to fill the container dimensions in these cases, matching the behavior of raster images. To align with this behavior and meet author expectations, we now also synthesize preserveAspectRatio='none' when a viewBox is synthesized for an embedded SVG. This allows the SVG content to stretch to fill the <img> container, consistent with other browsers and the expected behavior for replaced elements. * Source/WebCore/svg/SVGSVGElement.cpp: (WebCore::isEmbeddedThroughSVGImage): (WebCore::SVGSVGElement::currentViewBoxRect const): (WebCore::SVGSVGElement::viewBoxToViewTransform const): * LayoutTests/svg/as-image/svg-image-aspect-ration-par-none.html: Added. * LayoutTests/svg/as-image/svg-image-aspect-ration-par-none-expected.html: Added. Canonical link: https://commits.webkit.org/305043@main
diff --git a/LayoutTests/svg/as-image/svg-image-aspect-ration-par-none-expected.html b/LayoutTests/svg/as-image/svg-image-aspect-ration-par-none-expected.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+img, svg {
+  border: 5px solid red;
+}
+</style>
+<body>
+<img style="width: 200px; height: 500px;" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='500'><rect fill='lime' width='200' height='500'/></svg>">
+<img style="width: 500px; height: 200px;" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='200'><rect fill='lime' width='500' height='200'/></svg>">
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
+<rect fill="lime" width="100" height="50"/>
+</svg>
+</body>
diff --git a/LayoutTests/svg/as-image/svg-image-aspect-ration-par-none.html b/LayoutTests/svg/as-image/svg-image-aspect-ration-par-none.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+img, svg {
+    border: 5px solid red;
+}
+</style>
+<body>
+    <img style="width: 200px; height: 500px;" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50' preserveAspectRatio='xMidYMid meet'><rect fill='lime' width='100' height='50'/></svg>">
+    <img style="width: 500px; height: 200px;" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50' preserveAspectRatio='xMidYMid meet'><rect fill='lime' width='100' height='50'/></svg>">
+    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
+        <rect fill="lime" width="100" height="50"/>
+    </svg>
+</body>
diff --git a/Source/WebCore/svg/SVGSVGElement.cpp b/Source/WebCore/svg/SVGSVGElement.cpp
@@ -47,6 +47,7 @@
 #include "SVGAngle.h"
 #include "SVGDocumentExtensions.h"
 #include "SVGElementTypeHelpers.h"
+#include "SVGImage.h"
 #include "SVGLength.h"
 #include "SVGMatrix.h"
 #include "SVGNumber.h"
@@ -573,6 +574,11 @@ bool SVGSVGElement::hasTransformRelatedAttributes() const
     return (hasAttribute(SVGNames::xAttr) || hasAttribute(SVGNames::yAttr)) || (hasAttribute(SVGNames::viewBoxAttr) && !hasEmptyViewBox());
 }
 
+static bool isEmbeddedThroughSVGImage(const SVGSVGElement& element)
+{
+    return element.document().documentElement() == &element && isInSVGImage(&element);
+}
+
 FloatRect SVGSVGElement::currentViewBoxRect() const
 {
     if (m_useCurrentView) {
@@ -585,24 +591,7 @@ FloatRect SVGSVGElement::currentViewBoxRect() const
     if (!viewBox.isEmpty())
         return viewBox;
 
-    auto isEmbeddedThroughSVGImage = [this](const RenderElement* renderer) -> bool {
-        auto isDocumentElement = document().documentElement() == this;
-        if (!isDocumentElement)
-            return false;
-
-        if (!renderer)
-            return false;
-
-        if (auto* svgRoot = dynamicDowncast<LegacyRenderSVGRoot>(renderer))
-            return svgRoot->isEmbeddedThroughSVGImage();
-
-        if (auto* svgRoot = dynamicDowncast<RenderSVGRoot>(renderer))
-            return svgRoot->isEmbeddedThroughSVGImage();
-
-        return false;
-    };
-
-    if (!isEmbeddedThroughSVGImage(checkedRenderer().get()))
+    if (!isEmbeddedThroughSVGImage(*this))
         return { };
 
     // If no viewBox is specified but non-relative width/height values, then we
@@ -668,8 +657,18 @@ float SVGSVGElement::intrinsicHeight() const
 
 AffineTransform SVGSVGElement::viewBoxToViewTransform(float viewWidth, float viewHeight) const
 {
-    if (!m_useCurrentView || !m_viewSpec)
-        return SVGFitToViewBox::viewBoxToViewTransform(currentViewBoxRect(), preserveAspectRatio(), viewWidth, viewHeight);
+    if (!m_useCurrentView || !m_viewSpec) {
+        auto currentViewBox = currentViewBoxRect();
+        // If we synthesized a viewBox (no explicit viewBox but embedded through SVGImage),
+        // we should also synthesize preserveAspectRatio="none" to allow stretching.
+        if (viewBox().isEmpty() && !currentViewBox.isEmpty() && isEmbeddedThroughSVGImage(*this)) {
+            // Create a synthetic preserveAspectRatio with align="none".
+            auto preserveAspectRatio = SVGPreserveAspectRatioValue(SVGPreserveAspectRatioValue::SVG_PRESERVEASPECTRATIO_NONE, SVGPreserveAspectRatioValue::SVG_MEETORSLICE_MEET);
+            return SVGFitToViewBox::viewBoxToViewTransform(currentViewBox, preserveAspectRatio, viewWidth, viewHeight);
+        }
+
+        return SVGFitToViewBox::viewBoxToViewTransform(currentViewBox, preserveAspectRatio(), viewWidth, viewHeight);
+    }
 
     RefPtr viewSpec = m_viewSpec;
     AffineTransform transform = SVGFitToViewBox::viewBoxToViewTransform(currentViewBoxRect(), viewSpec->preserveAspectRatio(), viewWidth, viewHeight);
