I was wanting to have an SVG graphic always stretch to fill its viewport vertically, but be sliced horizontally. Unfortunately, the preserveAspectRatio attribute of <svg> elements only supports either meet (stretch-to-fit) or slice (always fill the viewport).
So, in finest web-development tradition, I came up with a hack, using a 1-unit-wide outer “meet”ing <svg> element, which contains a full-size (mega-wide) “slice”d element:
<svg id="outer" x="100%" y="0" width="1" height="100%" viewBox="0 0 1 1000" preserveAspectRatio="xMaxYMax meet" overflow="visible" > <svg id="inner" x="-2000" y="0" width="2000" height="100%" viewBox="0 0 2000 1000" preserveAspectRatio="xMaxYMax slice" overflow="visible" > ... </svg> </svg>
You should be able to see the result of this hackery on my main site; raumkraut.net. Assuming it hasn’t been overhauled again since this posting.
Unless, that is, you’re running a WebKit-based browser, since (at time of writing) they seem to treat all SVG backgrounds as having preserveAspectRatio=”none”. Sigh.