- From: Benjamin Lord <ben@abmcd.com>
- Date: Fri, 12 Jul 2013 16:10:55 -0700
- To: www-svg@w3.org
- Message-Id: <75C8BE44-BD42-4602-9084-019401B35BAE@abmcd.com>
As an author, I want to be able to write a viewport without dimension attributes:
<svg viewBox="0 0 550 350" preserveAspectRatio="xMinYMin meet">
and css:
svg {
height: auto; /* possibly some other magic value here? */
display:block;
max-width: 100%;
}
and know that the element height will be forced to 63% (350/550) of the width in all cases.
As you probably all know, it doesn't work this way in browsers right now. See especially comments 8 and 9 from this longstanding and seemingly forgotten bug:
https://bugs.webkit.org/show_bug.cgi?id=68995
SVG height apparently needs to be explicit in all cases, which is a fundamental deal breaker for responsive design. Weirdly enough there is a hack in webkit/blink where adding css `height:100%` causes the computedHeight to scale proportionately but that behavior isn't spec'ed or even sensible. 100% of what?
The cross-browser workaround for now is to use intrinsic ratios to create a proportion in the wrapper like this:
..svg-wrap {
height: 0;
padding-top:63.63%; /* 350px/550px */
position: relative;
}
svg {
height: 100%;
display:block;
width: 100%;
position: absolute;
top:0;
left:0;
}
But this is clearly not what we want long-term, because it requires maintenance of custom classes for the proportion. The other option, of course, is watching for viewport resize with script:
http://www.brichards.co.uk/blog/webkit-svg-height-bug-workaround
That's also brittle and tedious.
I haven't worked out all the details but it seems to me there should be some kind of possible css value for SVG height (if not "auto" or "auto !important" then perhaps a magic string like "scale") that will instruct browsers to look at:
a) the proportion of any dimension attributes, if specified, otherwise:
b) the proportion implicit in a declared viewBox, if specified
and use that to generate the element height based on the element's width, using css. If I'm wrong about any of this I would greatly appreciate an clarification.
Thanks,
Ben
Received on Friday, 12 July 2013 23:13:10 UTC