- From: <alex@bellandwhistle.net>
- Date: Mon, 16 Dec 2013 18:14:27 -0800
- To: www-svg@w3.org
On 2013-12-16 17:17, Brian Birtles wrote: > Hi all, > > For SVG2 there are two proposed changes to viewBox. > > a) Make it a CSS property so you can, for example, tweak it with media > queries to make responsive SVG images. Hi Brian- What are the use cases for (a) exactly? This seems to be mostly about convenience (not a bad thing). But the problem that I see is that whether the viewbox is defined in an attribute or in CSS, responsive SVG can currently only be made to work when width and height attributes are either omitted or supplied in percentages, and it seems like the majority of authoring tools typically include rootmost height and width attributes in pixels. So authors might well slap on a “viewbox:auto” CSS property, and then wonder why their svg isn’t responsive. The 1.1 intrinsic sizing spec says: “If either/both of the ‘width’ and ‘height’ of the rootmost ‘svg’ element are in percentage units (or omitted), the aspect ratio is calculated from the width and height values of the ‘viewBox’ specified for the current SVG document fragment. If the ‘viewBox’ is not correctly specified, or set to 'none', the intrinsic aspect ratio cannot be calculated and is considered unspecified.[1]” So, to allow authors to force a hardcoded SVG to be responsive using pure css, it might be useful to add “auto” to this list of conditions, and also get rid of the use of percentage units as a indicator to force intrinsic ratio calculation (something that has never quite made sense, or been implemented consistently cross-browser) E.g. revise the above roughly to: “If either/both of the ‘width’ and ‘height’ of the rootmost <?> element are omitted, or if CSS width and height of the rootmost <?> element’ are both specified to the keyword ‘auto’, then etc etc… ” and then authors could write: .my-hardcoded-svg { width: auto !important; height: auto !important; viewbox: auto; } and get instant responsive behavior without even having to open the svg file. :) +1 for stroke bounding box as the bound. Also, while in this vein, would it also make sense to also port preserveAspectRatio to CSS, for some of the same reasons? Cheers, Alex 1 [http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing]
Received on Tuesday, 17 December 2013 02:15:00 UTC