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已存在，否则viewBox的“0 0宽度高度”。

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

xml:space属性仅在SVG文件中包含文本元素时才有用。

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

Answer 2

缩减版本无效SVG。它将被视为“只是任何”XML恰好有一个名为“svg”的根元素。

要将代码段转换为 SVG，有两个选项：

将xmlns属性与适当的命名空间添加到svg元素（如您所发现的）
将DOCTYPE添加到文档^1,2
以MIME类型image/svg+xml提供文档不足！

示例：

<svg xmlns="http://www.w3.org/2000/svg">（消费者选择的SVG版本）
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">（适用于SVG 1.0）

使用W3 validator检查您的文档。确保检查检测到的doctype是否为SVG，因为该文档可能仍在验证，但是作为一般/未知XML。 - 他们也有test pages。

¹对于Chrome 53来说还不够好 ²不再推荐

SVG的最小值是多少？

2 个答案: