Comment mettre à l’échelle l’image SVG pour remplir la fenêtre du navigateur?

Cela semble être facile, mais je ne reçois rien.

Je souhaite créer une page HTML contenant une seule image SVG qui s’adapte automatiquement à la fenêtre du navigateur, sans aucun défilement et tout en conservant son format.

Par exemple, j’ai actuellement une image SVG 1024×768; Si la fenêtre du navigateur est 1980×1000, je souhaite que l’image soit affichée à 1333×1000 (remplissez verticalement, centré horizontalement). Si le navigateur était 800×1000 alors je veux qu’il affiche à 800×600 (remplir horizontalement, centré verticalement).

Actuellement je l’ai défini ainsi:

 
...

Cependant, cela prend toute la largeur du navigateur (pour une fenêtre large mais courte) et produit un défilement vertical, ce qui n’est pas ce que je veux.

Qu’est-ce que je rate?

Que diriez-vous:

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

J’ai un exemple sur mon site utilisant (approximativement) cette technique, mais avec 5% de remplissage tout autour et en utilisant la position:absolute au lieu de la position:fixed :
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(L’utilisation de position:fixed empêche un scénario très complexe de liaison à une ancre de sous-page sur la page et le overflow:hidden peut garantir qu’aucune barre de défilement n’apparaisse jamais (au cas où vous avez du contenu supplémentaire).