W3C home > Mailing lists > Public > public-html@w3.org > July 2015

Re: Specification needed for embedding SVGs

From: Martin Janecke <w3.org@prlbr.com>
Date: Fri, 3 Jul 2015 17:05:47 +0200
To: Adrian Bateman <adrianba@microsoft.com>, "public-html@w3.org" <public-html@w3.org>
Message-ID: <5596A4CB.8050307@prlbr.com>
Adrian, thanks for your testing. I'm happy to hear that Microsoft’s and 
the other browsers’ behavior converges.

I’m surprised Chrome and Firefox show the same results for test case [a] 
https://prlbr.de/2015/03/inline-svg.html for you, though. They don’t 
show the same results for me.

Here are two screenshots of narrow browser windows on Mac OSX:

Anyway, wouldn’t specifying the (intended) behavior make sense even if 
they already showed the same results?


PS: Sorry for the late reply.

On 15.06.15 23:59, Adrian Bateman wrote:
> 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 Friday, 3 July 2015 15:06:15 UTC

This archive was generated by hypermail 2.3.1 : Thursday, 29 October 2015 10:16:44 UTC