SVG images on non-Edge IE are 150px in height

[juyrjola]

Apparently, responsive SVGs require an IE-specific hack:

.container {
    height: 0;             /* collapse the container's height */
    width: width-value;    /* specify any width you want (a percentage value, basically) */
    /* apply a padding using the following formula */
    /* this formula makes sure the aspect ratio of the container equals that of the svg graphic */
    padding-top: (svg height / svg width) * width-value;
    position: relative;    /* create positioning context for svg */
}

svg {
    position: absolute;
    top: 0;
    left: 0;
}

(source: http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/)

[akx]

Should there be a "width %" control on the embedding block?

Also, the linked article says using <img>s works "out of the box", so we could just data-URI encode the rendered SVG and embed it using a data uri?

[juyrjola]

I believe it is safe to always assume 100% width. If another width is needed, we can set it in the containing element.

<img> tags would have the drawback of not being able to be styled through CSS, and I guess we couldn't attach JS event listeners to the SVG elements, either.

[akx]

Check.

That just means we'll have to dig in to the SVG to find the width and height.

[juyrjola]

Right. It might make sense to dig the dimensions out while the SVG is being processed for the ids and store them in ImageMap. In the SVG file I'm looking at, the dimensions are located in the viewBox attribute of the <svg> element.