- From: Karl Dubost via GitHub <noreply@w3.org>
- Date: Wed, 17 Dec 2025 12:55:51 +0000
- To: public-svg-issues@w3.org
karlcow has just created a new issue for https://github.com/w3c/svgwg:
== naturalWidth and naturalHeight in the context of an HTML image ==
The height and the width of this svg is 200px by 150px.
```
<svg width='200' height='150' viewBox='0 0 800 600' style='background-color:gold'></svg>
```
Now let's make the content of an image:
```
<img
src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 800 600' style='background-color:gold'></svg>">
```
and compute
```
document.querySelector('img').naturalWidth
document.querySelector('img').naturalHeight
```
Probably it should be:
```
200
150
```
but then what does it mean for
missing width.
```
<img
src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 800 600' style='background-color:gold'></svg>">
```
or missing height.
```
<img
src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='150' viewBox='0 0 800 600' style='background-color:gold'></svg>">
```
or both missing
```
<img
src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' style='background-color:gold'></svg>">
```
Browsers return different results in this WPT test.
https://wpt.fyi/results/html/semantics/embedded-content/the-img-element/naturalWidth-naturalHeight.html?label=master&label=experimental&aligned&q=naturalwidth
Please view or discuss this issue at https://github.com/w3c/svgwg/issues/1044 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 17 December 2025 12:55:52 UTC