在 HTML5 文档中链接或内联的 SVG 图像是一种相对年轻的做法（按 Web 标准），但我认为它快速成熟很重要。现代浏览器应该如何调整任何一种 svg 图像的大小，只说明它们的纵横比（根据它们的viewBox），以及父 HTML 文档在哪里只给出了宽度或高度中的一个（但不是两者）？
为了有效地缩小主题，这个问题只涉及<!DOCTYPE html>HTML5 文档。
我制作了一个测试页面，在几个不同的 HTML 上下文中显示了这一点，并且只有 Firefox 的行为方式符合我的预期（并且更喜欢），在所有测试的情况下，从两者中推断出一个。在早期的测试中，Chrome 也曾使用过，但现在不再使用了。歌剧院非常接近。
这个问题的背景和背景
我喜欢 SVG 的一件事是，该格式允许您制作呈现为您拥有的任何文档大小的图像，只要您说明应该显示图像的哪些部分（以及可选地应该如何裁剪），而不是说明它应该画多大。
实际上，这让您可以在浏览器中随意查看漂亮的徽标并调整其大小，只需将浏览器窗口调整为您想要的任何大小，它就会愉快地绘制到新的边界框，而不用大惊小怪。
这是通过viewBox在元素上设置一个属性来完成的<svg>，但既不设置width也不设置height属性，因此它保留了该纵横比，使用（默认）svg 定位和裁剪策略，preserveAspectRatio="xMidYMid meet"这基本上background-position: 50% 50%; background-size: contain;意味着对于 CSS3 背景图像规范意味着什么。