search

dseif / slide-drive

Slideshow using audio/video to drive content
45 stars 9 forks source link

Display SVGs at a constant aspect ratio #71

Open banksJeremy opened 12 years ago

banksJeremy commented 12 years ago

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>​