- 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