我把我最初的绝望呐喊编辑成更符合技术性的东西，以便把它变成一个问答。
我正在使用我在文档中引用的带有use元素的 SVG 符号。我正在用 CSS 设置这些样式。我不想在 CSS 中同时设置高度和宽度，我只想设置其中一个，另一个相应地缩放。
我确实在符号上设置了一个viewBox属性。但图形无法正确缩放。
<!DOCTYPE html>
<html>
<head>
<title>SVG Symbols</title>
<style>
body { margin: 20px; }
.svg-large { width: 500px; fill: yellow;}
</style>
</head>
<body>
<svg style="display:none;">
<symbol id="scary-smiley" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="9.5" stroke-width="1"
stroke="black" />
<circle cx="6" cy="7" r="1.5" fill="black"/>
<circle cx="14" cy="7" r="1.5" fill="black"/>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Teeth_by_David_Shankbone.jpg/320px-Teeth_by_David_Shankbone.jpg"
width="10" height="5.2" x="5" y="11"/>
</symbol>
</svg>
<svg class="svg-large">
<use xlink:href="#scary-smiley"/>
</svg>
</body>
</html>下面的代码已经在当前的Firefox，Chrome和名为Midori的基于Webkit的浏览器中进行了测试。
出于某种原因，在symbol元素上定义viewBox在 Firefox 和 Chrome 中并没有达到完全预期的效果。不过，它确实有一些效果，因为它使元素可缩放。因此，如果您想在CSS中同时设置width和height，则可以这样做。
如果仅在symbol上指定了viewBox元素，并且您只设置了width或height中的一个，则在 Firefox 和 Chrome 中，另一个维度是根据 HTML 5 whis 中的默认对象大小设置为 300x150 像素。因此，在问题的示例中，您将获得一个 500x150 像素的元素，并缩放图形以适合该矩形。
如果您只想定义一个width或height，另一个相应地缩放，则在引用SVG 元素上定义viewBox是有效的：
<!DOCTYPE html>
<html>
<head>
<title>SVG Symbols</title>
<style>
body { margin: 20px; }
.svg-large { width: 500px; fill: yellow;}
</style>
</head>
<body xmlns:xlink="http://www.w3.org/1999/xlink">
<svg style="display:none;">
<symbol id="scary-smiley">
<circle cx="10" cy="10" r="9.5" stroke-width="1"
stroke="black" />
<circle cx="6" cy="7" r="1.5" fill="black"/>
<circle cx="14" cy="7" r="1.5" fill="black"/>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Teeth_by_David_Shankbone.jpg/320px-Teeth_by_David_Shankbone.jpg"
width="10" height="5.2" x="5" y="11"/>
</symbol>
</svg>
<svg class="svg-large" viewBox="0 0 20 20">
<use xlink:href="#scary-smiley"/>
</svg>
</body>
</html>根据 SVG 2 规范，Firefox' 和 Chrome 的行为符合标准，根据该规范，<svg><use .../></svg>条款建立了一个新的 SVG 视口。