¿Cómo escalar la imagen SVG para llenar la ventana del navegador?

Parece que debería ser fácil, pero no obtengo nada.

Quiero crear una página HTML que contenga una sola imagen SVG que se escale automáticamente para adaptarse a la ventana del navegador, sin desplazarse y conservando su relación de aspecto.

Por ejemplo, en este momento tengo una imagen SVG de 1024x768; si la ventana del navegador es 1980x1000, entonces quiero que la imagen se muestre a 1333x1000 (rellenar verticalmente, centrado horizontalmente). Si el navegador era 800x1000, quiero que se muestre a 800x600 (relleno horizontalmente, centrado verticalmente).

Actualmente lo tengo definido así:

<body style="height: 100%">
  <div id="content" style="width: 100%; height: 100%">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="100%" height="100%"
         viewBox="0 0 1024 768"
         preserveAspectRatio="xMidYMid meet">
      ...
    </svg>
  </div>
</body>

Sin embargo, esto se está ampliando al ancho completo del navegador (para una ventana ancha pero corta) y produciendo un desplazamiento vertical, que no es lo que quiero.

¿Qué me estoy perdiendo?

— Miral
fuente

Inexplicablemente, intenté mover los atributos de estilo en línea a un bloque de estilo CSS en el encabezado, y luego funcionó. No sé por qué hizo la diferencia. (Aunque necesitaba agregar desbordamiento: oculto; de lo contrario, había un desplazamiento vertical de 4 píxeles).

— Miral

175

Qué tal si:

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; bottom:0; left:0; right:0 }

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

Tengo un ejemplo en mi sitio usando (aproximadamente) esta técnica, aunque con un 5% de relleno alrededor, y usando en position:absolutelugar de position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(El uso position:fixedevita un escenario muy extremo de vinculación a un ancla de subpágina en la página y overflow:hiddenpuede garantizar que nunca aparezcan barras de desplazamiento (en caso de que tenga contenido adicional).

— Phrogz
fuente

Y un +1 tardío por dejar ese enlace 2 años después.

— msanford

Tenga en cuenta que esta solución se basa en el viewBoxatributo.

— ubershmekel

El vínculo sigue ahí, casi 4 años después. ¡Buen trabajo, @Phrogz!

— Richard

Sí, gracias @Phrogz ... Y en caso de que alguna vez se caiga, hice una versión de codepen

— Jay

Y +1 por más de 8 años

— Sudhir Kaushik