New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Define how <image> and <img> deal with width & height, and media queries #289

Open
jakearchibald opened this Issue Oct 10, 2016 · 4 comments

Comments

Projects
None yet
3 participants
@jakearchibald

jakearchibald commented Oct 10, 2016

https://svgwg.org/svg2-draft/embedded.html#ImageElement

Demo: http://jsbin.com/siqufa/

Most browsers scale the SVG image to the dimensions of the <img>/<image>, but use the dimensions of the <img>/<image> as the viewport for media query purposes.

Firefox differs. For <image> it renders the SVG at its intrinsic size then clips to the <image> width and height. It uses the dimensions of the <image> as the viewport for media query purposes. For <img> it scales the SVG image to the dimensions of the <img> as above, but it uses the device-pixel dimensions for media query purposes, meaning different media queries activate as devicePixelRatio changes.

I can't see where these rendering characteristics are defined, apologies if they are.

@AmeliaBR

This comment has been minimized.

Show comment
Hide comment
@AmeliaBR

AmeliaBR Oct 10, 2016

Contributor

This is related to #249, in that they both address undefined aspects of how SVG scales to fit when used as an image.

For media queries, I would expect that dimensions are always measured in CSS pixels, and device pixel ratio would only show up in resolution queries. Where it gets confusing is when you're drawing an image into a scaled coordinate system (e.g., another SVG with a viewBox, or a CSS img that has had a transform applied, or a canvas where the bitmap size doesn't match the rendered size in CSS px). The issue with canvas, of course, is that there is currently no way to set high dpr other than to double the bitmap size and scale down.

Contributor

AmeliaBR commented Oct 10, 2016

This is related to #249, in that they both address undefined aspects of how SVG scales to fit when used as an image.

For media queries, I would expect that dimensions are always measured in CSS pixels, and device pixel ratio would only show up in resolution queries. Where it gets confusing is when you're drawing an image into a scaled coordinate system (e.g., another SVG with a viewBox, or a CSS img that has had a transform applied, or a canvas where the bitmap size doesn't match the rendered size in CSS px). The issue with canvas, of course, is that there is currently no way to set high dpr other than to double the bitmap size and scale down.

@jakearchibald

This comment has been minimized.

Show comment
Hide comment
@jakearchibald

jakearchibald Oct 11, 2016

Yeah, definitely part of #249. Sorry, I didn't see that on a quick search of the issues.

My gut feeling is that transforms shouldn't change the viewport size of SVG as scaling an iframe doesn't.

With bitmap APIs like <canvas> and createImageBitmap, I think it's important that the developer can control the viewport and drawn pixels independently. This is why I'm rooting for Edge's behaviour in whatwg/html#1880, and proposing options for createImageBitmap in whatwg/html#1881.

Yeah, definitely part of #249. Sorry, I didn't see that on a quick search of the issues.

My gut feeling is that transforms shouldn't change the viewport size of SVG as scaling an iframe doesn't.

With bitmap APIs like <canvas> and createImageBitmap, I think it's important that the developer can control the viewport and drawn pixels independently. This is why I'm rooting for Edge's behaviour in whatwg/html#1880, and proposing options for createImageBitmap in whatwg/html#1881.

@jakearchibald

This comment has been minimized.

Show comment
Hide comment
@jakearchibald

jakearchibald Oct 11, 2016

Firefox issue for the incorrect viewport setting https://bugzilla.mozilla.org/show_bug.cgi?id=986403

Firefox issue for clipping <image> https://bugzilla.mozilla.org/show_bug.cgi?id=1309152

Firefox issue for the incorrect viewport setting https://bugzilla.mozilla.org/show_bug.cgi?id=986403

Firefox issue for clipping <image> https://bugzilla.mozilla.org/show_bug.cgi?id=1309152

@boggydigital boggydigital added this to the SVG 2.1 Working Draft milestone Jun 11, 2018

@boggydigital

This comment has been minimized.

Show comment
Hide comment
@boggydigital

boggydigital Jun 11, 2018

Contributor

Not blocking updated 2.0 CR publication - assigning 2.1 WD milestone

Contributor

boggydigital commented Jun 11, 2018

Not blocking updated 2.0 CR publication - assigning 2.1 WD milestone

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment