Як масштабувати зображення SVG, щоб заповнити вікно браузера?

Question 1

Здається, це повинно бути легко, але я просто чогось не отримую.

Я хочу створити HTML-сторінку, що містить одне зображення SVG, яке автоматично масштабується відповідно до вікна браузера, без будь-якої прокрутки та при цьому зберігаючи співвідношення сторін.

Наприклад, на даний момент я маю зображення SVG 1024x768; якщо область перегляду браузера 1980x1000, тоді я хочу, щоб зображення відображалося у розмірі 1333x1000 (заповнюйте вертикально, по центру горизонтально). Якщо браузер був розміром 800x1000, тоді я хочу, щоб він відображався у розмірі 800x600 (заповнюйте горизонтально, по центру вертикально).

На даний момент я визначив це так:

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

Однак це масштабування на всю ширину браузера (для широкого, але короткого вікна) і отримання вертикальної прокрутки, чого не хочу.

Чого мені не вистачає?

Question 2

Як щодо:

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

У мене є приклад на моєму сайті, який використовує (приблизно) цю техніку, хоча з 5% заповненням навколо і використовуючи position:absoluteзамість position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Використання position:fixedзапобігає крайньому сценарію посилання на прив'язку підсторінки на сторінці та overflow:hiddenможе гарантувати відсутність полос прокрутки (на випадок, якщо у вас є додатковий вміст.)