Làm thế nào để chia tỷ lệ hình ảnh SVG để lấp đầy cửa sổ trình duyệt?

Question 1

Điều này có vẻ như nó phải được dễ dàng, nhưng tôi chỉ là không nhận được một cái gì đó.

Tôi muốn tạo một trang HTML có chứa một hình ảnh SVG tự động thay đổi tỷ lệ để vừa với cửa sổ trình duyệt, không cần cuộn và vẫn giữ nguyên tỷ lệ co của nó.

Ví dụ: hiện tại tôi có hình ảnh SVG 1024x768; nếu chế độ xem của trình duyệt là 1980x1000 thì tôi muốn hình ảnh hiển thị ở 1333x1000 (điền theo chiều dọc, căn giữa theo chiều ngang). Nếu trình duyệt là 800x1000 thì tôi muốn nó hiển thị ở 800x600 (điền theo chiều ngang, căn giữa theo chiều dọc).

Hiện tại tôi đã định nghĩa nó như vậy:

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

Tuy nhiên, điều này đang mở rộng đến toàn bộ chiều rộng của trình duyệt (cho một cửa sổ rộng nhưng ngắn) và tạo ra cuộn dọc, đó không phải là điều tôi muốn.

Tôi đang thiếu gì?

Question 2

Làm thế nào về:

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

Hoặc là:

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

Tôi có một ví dụ trên trang web của mình bằng cách sử dụng (đại khái) kỹ thuật này, mặc dù có 5% đệm xung quanh và sử dụng position:absolutethay vì position:fixed:
http://phrogz.net/svg/svg_in_xhtml5.xhtml

(Việc sử dụng position:fixedngăn chặn trường hợp rất phức tạp khi liên kết đến một liên kết trang phụ trên trang và overflow:hiddencó thể đảm bảo rằng không có thanh cuộn nào xuất hiện (trong trường hợp bạn có thêm nội dung).