Specify what the viewport should be when drawing SVG to a canvas

[jakearchibald]

I've filed an issue with SVG, as displaying SVG in an image doesn't seem well-defined w3c/svgwg#289

However, we need to define how SVG is drawn to a canvas, particularly in terms of media queries.

canvas2dContext.drawImage(img, x, y, width, height);

Edge uses the layout size of the <img> to determine the viewport. If the <img> doesn't have layout then it falls back to the width/height attributes, if it doesn't have those it falls to the intrinsic dimensions of the <img>. This seems ideal, as you can change the viewport independent of the size it's drawn to the canvas.

At the moment every browser does something different here. Documentation and demos: https://jakearchibald.com/2016/svg-media-queries/#drawing-svg-to-a-canvas

[domenic]

@junov @xidachen @grorg any opinions on this question of drawing a SVG to a canvas? Does aligning with Edge's behavior here sound reasonable, if we write some web platform tests and update the spec to be precise?

[junov]

I agree with @jakearchibald that Edge's behavior is probably the more desirable one for web devs. The "bizarro-pants" behavior in Chrome is based on a (possibly incorrect) literal interpretation of the spec, which I agree is not that useful.