Specification needed for embedding SVGs

Hello everyone.

Embedding SVGs into HTML has been officially supported by major browsers 
for years.^[1] Yet I could not find a specification for how the 
integration happens. In particular, I’m interested in how the SVG is 
sized and resized. The HTML specification lacks information about 
this.^[2] Is this specified somewhere else?

Personally, I would not have been bothered by an absence of a 
specification, if major browsers would be consistent about embedding 
SVGs. But they are not – I’ll link to example cases in a moment –, which 
practically renders embedding SVGs almost useless after all these years 
of official support.

Let me add that the use of embedded SVGs has been suggested as solution 
for the demand for responsive image maps in a discussion on the WHATWG 
mailing list,^[3] and this solution works with embedded SVGs only, 
because browsers do not support links and “tooltips” in SVGs that are 
referenced by the HTML img element – presumably with good cause.

So here are a number of example documents. In these examples the SVG is 
used to define active areas (dog and shoes) on a pixel image:

[a] https://prlbr.de/2015/03/inline-svg.html
Here the embedded svg element has attributes width='800px' 
height='600px' viewBox='0 0 800 600'. CSS embedded in the HTML head 
defines svg {max-width:100%; height:auto !important}.
In Firefox 38, the image (re)sizes like an img element with the same CSS 
code applied to it would. This is what I expect.
In Safari 8, Chrome 43 and Opera 29 the “outer height” of the svg does 
not resize automatically despite the CSS command. The displayed image 
does resize though, so that empty space is added above and below the 
image in narrow browser windows.
In IE9 – sorry, I don’t have a newer one, but I’ve been told that IE11 
handles this similar – the image has a height of 150px, which I’ve 
defined nowhere in the document. Furthermore, the tiny image is always 
positioned at about the middle of an 800px wide space, even if the 
browser window is narrower.

[b] https://prlbr.de/2015/03/inline-svg-without-height.html
Compared to case [a] I’ve removed the height attribute on the svg 
element. Also, height:auto is not marked as !important in CSS anymore, 
but that may not be relevant.
Now Firefox, Safari, Chrome and Opera all display the image as Firefox 
did in case [a].
IE9 shows the same behavior as it did in case [a].

[c] https://prlbr.de/2015/03/inline-svg-without-size.html
This time I’ve neither defined width nor height attributes on the svg 
element. But I’ve used CSS in the HTML head to define svg {width:100%} 
and figure {max-width:800px}. The svg element is placed inside that 
figure element.
The results for Firefox, Safari, Chrome and Opera are the same as in [b].
IE9 still forces the image to a height of 150px, but the tiny image is 
now positioned more sensibly in the middle of the available space.

[d] https://prlbr.de/2015/03/inline-svg-with-container.html
Here I’m using a clever/crazy hack suggested by Erik Dahlström to make 
it work. But that can not be what we expect people to use, can it? It’s 
similar to case [c], but this time the svg element is placed inside a 
container div inside the figure element and then there’s some wizardry 
using absolute positioning, implied overflows and defining a 
padding-bottom on the container that is calculated to equal the aspect 
ratio of the image as a percent value.
This does work in Firefox, Safari, Chrome, Opera and IE9.

In conclusion, the (re)sizing behavior of embedded SVGs needs to be 
specified to make them usable in practice. I would prefer the behavior 
that Firefox shows.

I’m posting this to the HTML list, but please feel free to forward this 
concern to others, for example if you think SVG or CSS working groups 
could help here. (I suspect we may not have a specification yet because 
the issue is located somewhere in between the realms of HTML, CSS and SVG.)

Thanks, Martin

___
#[1] http://caniuse.com/svg-html5
#[2] http://www.w3.org/html/wg/drafts/html/master/semantics.html#svg-0
#[3] 
https://lists.w3.org/Archives/Public/public-whatwg-archive/2015Mar/0066.html 
(start of thread)

Received on Friday, 12 June 2015 10:53:14 UTC