Skip to content
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

@jakearchibald
Copy link

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
Copy link
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.

@jakearchibald
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants