RE: Specification needed for embedding SVGs

In my testing, for each of these four links, comparing in Microsoft Edge, Chrome, and Firefox shows the same results.

-----Original Message-----
From: Martin Janecke [mailto:w3.org@prlbr.com] 
Sent: Friday, June 12, 2015 3:53 AM
To: public-html@w3.org
Subject: 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 Monday, 15 June 2015 22:00:49 UTC