1309152 - SVG-as-<image> clips rather than scales (if no viewBox is provided)

Status: RESOLVED WORKSFORME

(Core :: SVG, defect, P3)

Description

[Jake Archibald]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36

Steps to reproduce:

http://output.jsbin.com/siqufa/ - the first example is an <image> pointing to some SVG, embedded in some SVG.


Actual results:

The SVG was clipped to the dimensions of the <image>.


Expected results:

The SVG should have scaled to the dimensions of the <image>, as happens with <img>.

This was decided in https://bugzilla.mozilla.org/show_bug.cgi?id=614649, but maybe <image> was missed? I've asked for spec clarification here https://github.com/w3c/svgwg/issues/249#issuecomment-252848759, but Firefox is currently the outlier, Edge, Safari & Chrome all scale the <image>.

Comment 1

[Daniel Holbert [:dholbert]]

Your SVG is not providing a viewBox, so the browser doesn't know (or isn't supposed to know) what piece of SVG-space it should scale up.

If you add viewBox="0 0 100 100" to your <svg> element inside the image (at https://jakearchibald.com/static/posts/svg-canvas-media-queries/fixed100.4b1cb7cb9384.svg ), it scales to the <image> size like you expect.

(For <img> and CSS Backgrounds, we synthesize a viewBox from the width/height attributes -- but we don't do that for <image>, because IIRC the SVG spec had this pretty well-defined to require our behavior.)

Comment 2

[Daniel Holbert [:dholbert]]

(In reply to Jake Archibald from comment #0)
> Firefox is currently the outlier, Edge, Safari & Chrome all scale the <image>.

Opera 12.16 (with Presto) matches Firefox's behavior, actually.  (They can't render the jsbin testcase in comment 0, because the jsbin uses resources from https://jakearchibald.com/ , and it seems that version of Opera can't connect securely to https://jakearchibald.com/ at all -- perhaps because of a newer encryption/signing algorithm.  But I tested it using an offline versions of the testcase and verified that Opera 12.16 crops just like we do.)

I'm bringing this up from a correctness perspective, not from a web-compat perspective. If all other modern browsers "just work" on this (even if it's violating the spec), we should consider getting the spec updated to reflect reality & matching the consensus behavior.

Comment 3

[Daniel Holbert [:dholbert]]

(alternately, maybe we can convince other browsers to just match the spec. :))

Comment 4

[Jonathan Watt [:jwatt]]

Looks like we fixed this.