Display SVGs at a constant aspect ratio #71

The SVGs heights adjust to match the available area, but the external width doesn't adjust to match. However, the SVG's internal contents are scaled down to fit.

This causes SVGs to be displayed too tall in print view. The inconsistent internal/external scaling is extremely annoying as I try to fix text selection or font rendering in Firefox; it's difficult enough to relate the external coordinates to the internal coordinates without that relationship changing every time the window is resized.

As far as I can tell, it's not possible to scale embedded SVGs automatically, like you can with an image, or an SVG included using <object> or <embed> or whatever. If alternatives exist, we should use them.

Perhaps something like this would work...

<div style="position: relative;">
  <img src="clear-image-of-correct-aspect-ratio" style="width: 100%; z-index: -10;" />
  <svg style="position: absolute; top: 0; left: 0; bottom: 0; right: 0;">...</svg>
</div>

edit: It does:

<div style="position: relative;"><img src="http://i.stack.imgur.com/V6KuG.gif" style="display: block; width: 100%; z-index: -10;" /><svg style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 100%;" viewbox="0 0 128 128"><image x="32" y="32" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="></image></svg></div>​