SVG:Sizing: Difference between revisions

This page is an in-progress attempt to make sense of the sizing of SVG content. You would think that with one 'width' attribute and one 'height' attribute this is a simple issue. Unfortunately the interaction of multiple units, omitted attribute(s), the CSS width/height/min-width/max-width/min-height/max-height properties, the 'background-image' property, the viewBox attribute, intrinsic width/height, intrinsic aspect ratio, and whether the SVG is rendering standalone, inline, or embedded by reference all add to the fun.

The CSS width/height/etc. properties are fairly well defined. An important question is what part do the SVG width and height attributes play, and how do they interact with CSS? Currently there are two primary candidate approaches to sizing SVG content; (1) map the 'width' and 'height' attributes into style; (2) treat root 'svg' elements as "replaced elements" in CSS terms. The former approach would have the advantage of being the most intuitive for authors. The latter approach solves the problem of the 'display' property (i.e. [http://lists.w3.org/Archives/Public/www-svg/2005May/0022.html what you do with |display:inline;| on SVG]), and unless the user sets only one of the CSS properties 'width' and 'height' on the SVG while also having 'width' and 'height' attributes, they won't notice a difference to the former approach (well, as long as percentage attribute values are intrinsic).