1328124 - image svg dimensions are 0

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[andreabogazzi79]

Attachment: 9.svg

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20161208153507

Steps to reproduce:

i create in firefox console this script:
var image = new Image();
image.src = 'http://titleist.ftsdesign.com/build/assets/images/markyourtitleist/numbers/prov1/9.svg'
i wait for image to load. ( i check image.complete returns true )
I check image width and height i get 0.
I check image naturalWidth and naturalHeight and i get 0.


Actual results:

I get 0 dimensions for image


Expected results:

I should get at least naturalWidth and naturalHeight populated with something ( 300x150 or a shrink to fit in this dimensions.

Chrome loads it correctly.

Comment 1

[Robert Longson [:longsonr]]

Why not just give the image width and height attributes? If you don't specify width and height you're going to get 0.

Comment 2

[andreabogazzi79]

Well, that is not the case with raster images and most svg that have width and height specified. I understand that no dimension for svg tag means 100% of container and we do not have container here. Is also true that chrome behaves differently and use the naturalWidth/Height values as a container to give back a dimension to user that respect the aspect ratio of SVG, safari does same. Microsoft family i did not check yet.

Is there any specific about Image element where i can go and read the correct behaviour?

Comment 3

[andreabogazzi79]

So i did a deeper checks just to leave as much as possible information for this kind of behaviour that for me is not correct.
The svg is valid and not malformed, and for this reason i expect i can load it in an image tag and paint on a canvas for example.

I made this fiddle: http://jsfiddle.net/1xxv5m2p/4/  very basic and very simple.

Chrome, Safari, Edge have different behaviour, but all get dimensions different from 0 and can actually paint the image over the canvas.

Firefox and ie11 go 0 dimensions and cannot paint anything.

I tried to assign the image width and height but this does not change any result. i tried assigning them before load and after load event but does not change the result.

Those are behaviour of other browsers:
Chrome ( best solution in my opinion ): take 300x150 (naturalWidth/naturalHeight) and fit the image in that area.
Safari 10: display image with viewBox dimensions
Edge: make a 300x150 image and put the svg with correct aspect ratio at center.

So while getting image width and height equal to 0 may not be considered a bug, not being able to draw an image i think it may considered a valid defect worth investigating.

I made another simple fiddle where the same image is appended to dom and correctly rendered, given a correct width and height but still not able to be painted on canvas.

http://jsfiddle.net/1xxv5m2p/5/

Please let me know if this matter ok is still not worth being inspected.
Regards, Andrea.

Comment 4

[Robert Longson [:longsonr]]

(In reply to andreabogazzi79 from comment #3)

> I made another simple fiddle where the same image is appended to dom and
> correctly rendered, given a correct width and height but still not able to
> be painted on canvas.
> 
> http://jsfiddle.net/1xxv5m2p/5/
> 
> Please let me know if this matter ok is still not worth being inspected.
> Regards, Andrea.

That's a known issue: bug 700533

Comment 5

[cdalxndr]

Related: https://github.com/whatwg/html/issues/3510