Bug 196910 – If the source of an <img> element is SVG image, the aspect ratio of the SVG image is preserved

• Status: NEW
• Component: SVG

[cathiechen]

When the ratio is different, Chrome and Firefox will stretch the svgImage to fit the ratio of <img>，
WebKit will position the svgImage in the middle.

E.g. 
```
<img style="width: 400px; height: 500px;" src="./green.svg"/>
```

```
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
  <rect fill="lime" width="100" height="50"/>
  <text x="0" y="15" fill="red">text</text>
</svg>

```

[Said Abou-Hallawa]

Created attachment 367639 [details]
test case

[Said Abou-Hallawa]

I am not sure which one is correct: preserving the aspect ratio or stretching the SVG image inside the <img> element. I personally like the WebKit behavior. I am not sure if there is specs addressing this issue. Does this cause any known bug?

[cathiechen]

No known bug, I just met this by accident. :)

I think the benefit of stretching the SVG image is that for the ratio insensitive SVG image, it could be reused by more scenario.

For instance, we need green images with different sizes and different ratio.
By stretching the SVG image, we could reuse one SVG image, otherwise we need to create different SVG images for every ratio.


PS: the ratio insensitive SVG image:
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="50">
  <rect fill="lime" width="100" height="50"/>
</svg>

[Frédéric Wang (:fredw)]

(In reply to Said Abou-Hallawa from comment #2)
> I am not sure if there is specs addressing this issue.

I'm curious about this too. Cathie, can you please investigate about this? (and raise the issue to the proper standardization group if necessary).

[cathiechen]

(In reply to Frédéric Wang (:fredw) from comment #4)
> (In reply to Said Abou-Hallawa from comment #2)
> > I am not sure if there is specs addressing this issue.
> 
> I'm curious about this too. Cathie, can you please investigate about this?
> (and raise the issue to the proper standardization group if necessary).


Not found in the Spec, but seems it has been disscussed in https://github.com/w3c/svgwg/issues/249#issuecomment-253092701.

[Nikolas Zimmermann]

We synthesize a viewBox if width or height properties are supplied on the outermost <svg> element and if we're embedded through SVGImage.

See SVGSVGElement::currentViewBoxRect():

    if (!downcast<RenderSVGRoot>(*renderer()).isEmbeddedThroughSVGImage())
        return { };

    Length intrinsicWidth = this->intrinsicWidth();
    Length intrinsicHeight = this->intrinsicHeight();
    if (!intrinsicWidth.isFixed() || !intrinsicHeight.isFixed())
        return { };

    // If no viewBox is specified but non-relative width/height values, then we
    // should always synthesize a viewBox if we're embedded through a SVGImage.    
    return { 0, 0, floatValueForLength(intrinsicWidth, 0), floatValueForLength(intrinsicHeight, 0) };
}

If you add viewBox="0 0 100 50" manually to Saids testcase the other browser will behave as the current WebKit rendering without the viewBox.

I added the code in 1adc559cd690b1bff7b5886ddee9e7112d238a92, 7 years ago.
Back then this matched Opera behavior and my understanding of the specs -- that could be different now. If that is the case (and there are WPT tests proving this) let's change it :-)

[Karl Dubost]

This test is failing 
http://wpt.live/css/css-ui/box-sizing-016.html

```
img {
    box-sizing: border-box;
    width: auto;
    height: auto;
    background: white;
    padding-bottom: 30px;
    max-height: 100px;
}
```

and

```
<svg 
  style="background: green" 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 100 100">
  <g id='testmeta' 
    xmlns:html='http://www.w3.org/1999/xhtml'>
  </g>
</svg>

```

and 

```
  <img src="support/r1-1.svg">
```

As soon as we set height to 100px. It is working. So I guess the current code doesn't take into account the max-height for the aspect ratio.

[Radar WebKit Bug Importer]

<rdar://problem/122586412>