Como dimensionar a imagem SVG para preencher a janela do navegador?

Parece que deve ser fácil, mas não estou conseguindo nada.

Quero fazer uma página HTML contendo uma única imagem SVG que é dimensionada automaticamente para caber na janela do navegador, sem qualquer rolagem e preservando sua proporção.

Por exemplo, no momento tenho uma imagem SVG de 1024x768; se a janela de visualização do navegador for 1980x1000, quero que a imagem seja exibida em 1333x1000 (preencher verticalmente, centralizado horizontalmente). Se o navegador era 800x1000, eu quero que ele seja exibido em 800x600 (preencher horizontalmente, centralizado verticalmente).

Atualmente eu tenho definido assim:

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

No entanto, isso está aumentando para a largura total do navegador (para uma janela ampla, mas curta) e produzindo rolagem vertical, que não é o que eu quero.

o que estou perdendo?

layout xhtml svg scaling aspect-ratio Miral
fonte

Inexplicavelmente, tentei mover os atributos de estilo inline para um bloco de estilo CSS no cabeçalho e, depois disso, funcionou. Não sei por que isso fez diferença. (Embora eu precisasse adicionar overflow: hidden - caso contrário, havia uma rolagem vertical de 4 pixels.)

Miral

Respostas:

175

E se:

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

Ou:

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

Tenho um exemplo em meu site usando (aproximadamente) essa técnica, embora com 5% de preenchimento ao redor, e usando em position:absolutevez de position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(O uso position:fixedevita um cenário muito extremo de vinculação a uma âncora de subpágina na página e overflow:hiddenpode garantir que nenhuma barra de rolagem apareça (no caso de você ter conteúdo extra).

Phrogz
fonte

E um +1 atrasado por deixar esse link ativo 2 anos depois.

msanford

Observe que esta solução depende do viewBoxatributo.

ubershmekel

O link ainda está lá, quase 4 anos depois. Bom trabalho, @Phrogz!

Richard

Sim, obrigado @Phrogz ... E para o caso de alguma vez cair, fiz uma versão codepen

Jay

E +1 por mais de 8 anos

Sudhir Kaushik