Re: The (new, enhanced) viewbox property

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