Come ridimensionare l'immagine SVG per riempire la finestra del browser?

Sembra che dovrebbe essere facile, ma non sto ottenendo qualcosa.

Voglio creare una pagina HTML contenente una singola immagine SVG che si ridimensiona automaticamente per adattarsi alla finestra del browser, senza alcuno scorrimento e preservando le sue proporzioni.

Ad esempio, al momento ho un'immagine SVG 1024x768; se la visualizzazione del browser è 1980x1000, voglio che l'immagine venga visualizzata a 1333x1000 (riempi verticalmente, centrata orizzontalmente). Se il browser era 800x1000, voglio che venga visualizzato a 800x600 (riempire orizzontalmente, centrare verticalmente).

Attualmente l'ho definito così:

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

Tuttavia, questo si sta ridimensionando fino alla larghezza completa del browser (per una finestra ampia ma breve) e producendo lo scorrimento verticale, che non è quello che voglio.

Cosa mi sto perdendo?

— Miral
fonte

Inspiegabilmente, ho provato a spostare gli attributi di stile inline in un blocco di stile CSS nella testa, e dopo ha funzionato. Non so perché abbia fatto la differenza. (Anche se avevo bisogno di aggiungere overflow: hidden - altrimenti c'era uno scroll verticale di 4 pixel.)

— Miral

175

Che ne dite di:

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

Ho un esempio sul mio sito che utilizza (approssimativamente) questa tecnica, anche se con un riempimento del 5% tutt'intorno, e utilizza position:absoluteinvece di position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(L'utilizzo position:fixedimpedisce uno scenario molto marginale di collegamento a un'ancora di sottopagina sulla pagina e overflow:hiddenpuò garantire che non vengano mai visualizzate barre di scorrimento (nel caso in cui si disponga di contenuto extra).

— Phrogz
fonte

E un +1 in ritardo per aver lasciato quel collegamento 2 anni dopo.

— msanford

Notare che questa soluzione si basa sull'attributo viewBox.

— ubershmekel

Il collegamento è ancora lì, quasi 4 anni dopo. Buon lavoro, @Phrogz!

— Richard

Sì, grazie @Phrogz ... E nel caso in cui dovesse mai andare giù, ho creato una versione codepen

— Jay

E +1 per oltre 8 anni

— Sudhir Kaushik