Intrinsic Sizing

From SVG
Jump to: navigation, search

Issue 1: Allow graphics to scale even with fixed size

Tools often output:

 <svg width="300px" height="723px">...</svg>

Such an SVG won't scale which is particularly annoying if you put it in an <img> or <iframe> element and hope it will resize to fit the box of that element.

The relevant spec text is:

"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"
https://svgwg.org/svg2-draft/coords.html#IntrinsicSizing

Authors must manually edit the file and remove the width/height or set them to a percentage value and ensure a suitable viewBox is set.

Alex Bell suggests adding auto keywords so that you could override this behavior [Brian: From where? An external stylesheet? The stylesheet of the containing document if the SVG is included in a seamless iframe?]

.my-hardcoded-svg {
  width: auto !important;
  height: auto !important;
  viewbox: auto;
}

Related to generating a viewBox for svg-in-img, see ISSUE-2258 (SVG Integration).

Issue 2: Does SVG conflate viewport and viewbox?

Alex Bell suggests, "the spec doesn’t distinguish between the intrinsic sizing of an SVG viewport". Furthermore, the combination of CSS sizing (object-fit) "doesn’t preserve the possibility of different aspect ratios for the viewport and the viewbox, which object-fit requires in order to work properly as written."

Currently seeking clarification on what exactly is missing here.

Brian's attempt to summarize the complex interaction between object-fit and SVG's object sizing:

Firstly, CSS' object-fit sizing determines the concrete object size of 
the replaced content which is possibly different to the CSS box the 
replaced content is positioned into.

Secondly, SVG takes this concrete object size as the viewport into which 
it sizes the viewbox by applying preserveAspectRatio etc.

Issue 3: Interop is poor for sizing of replaced content

Alex Bell, showed some cases where interop for replaced content is broken.

David Vest followed up explaining where some of the differences come from but agreed the interop story here isn't great.

Alex suggests a detailed algorithm for generating rootmost viewport dimensions needs to be written.