optimization - SVG 可以有多小？

Question

我刚刚缩小了这个 SVG:

<?xml version="1.0" standalone="no"?>

<svg viewBox="0 0 480 150" style="background-color:#ffffff00" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="480" height="150">
    <path d="M 0 35.5 L 6.5 22.5 L 16 37 L 23 24 L 34.8 43.7 L 42.5 30 L 50.3 47 L 59.7 27.7 L 69 47 L 85 17.7 L 98.3 39 L 113 9.7 L 127.7 42.3 L 136.3 23.7 L 147 44.3 L 158.3 20.3 L 170.3 40.3 L 177.7 25.7 L 189.7 43 L 199.7 21 L 207.7 35 L 219 11 L 233 37 L 240.3 23.7 L 251 43 L 263 18.3 L 272.7 33.3 L 283 10 L 295 32.3 L 301.3 23 L 311.7 37 L 323.7 7.7 L 339.3 39 L 346.3 25.7 L 356.3 42.3 L 369.7 15 L 376.3 25.7 L 384 9 L 393 28.3 L 400.3 19 L 411.7 38.3 L 421 21 L 434.3 43 L 445 25 L 453 36.3 L 464.3 18.3 L 476.2 40.3 L 480 33.5 L 480 215 L 0 215 L 0 35.5 Z" fill="#175720"/>
</svg>

对此:

<svg height="150" width="480"><path d="m0 35.5l6.5-13 9.5 14.5 7-13 11.8 19.7 7.7-13.7 7.8 17 9.4-19.3 9.3 19.3 16-29.3 13.3 21.3 14.7-29.3 14.7 32.6 8.6-18.6 10.7 20.6 11.3-24 12 20 7.4-14.6 12 17.3 10-22 8 14 11.3-24 14 26 7.3-13.3 10.7 19.3 12-24.7 9.7 15 10.3-23.3 12 22.3 6.3-9.3 10.4 14 12-29.3 15.6 31.3 7-13.3 10 16.6 13.4-27.3 6.6 10.7 7.7-16.7 9 19.3 7.3-9.3 11.4 19.3 9.3-17.3 13.3 22 10.7-18 8 11.3 11.3-18 11.9 22 3.8-6.8v181.5h-480v-179.5z" fill="#175720"/></svg>

(我通过最小化程序运行它，然后删除了 <svg> 标签中的一堆属性。)我将它用作背景图像，它似乎在 Windows 上的 IE、Firefox 和 Chrome 中工作正常。我只是想知道如果其他信息对图像外观没有影响的话，它在那里做什么。由于我删除了该信息，是否会在某个地方出现兼容性问题？

更新:我发现实际上，对于我的用例，我需要 xmlns="http://www.w3.org/2000/svg"否则它将无法在 IE 或 Chrome 中呈现。

Answer 1

删除viewBox由于 SVG 将不再缩放(即响应 UA 调整大小)，因此会产生显着的语义差异。这仅适用于您直接查看图像的情况，但如果您将其作为背景图像或通过 SVG 查看的话 <image>标签或 html <img>标签，那么 SVG 将被绘制为好像有 viewBox “0 0 宽度高度”，除非 viewBox已经存在。

删除background-color这意味着当 SVG 放置在其他东西之上时将不再是不透明的。当然，如果您不这样做，您可能不会注意到。

xml:space仅当 SVG 文件中有文本元素时，属性才有意义。

如果 SVG 是内联的，则其余删除都是良性的。如果 SVG 是独立文件，则需要命名空间属性，但背景图像就是这种情况。