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

缩减版本不是有效的 SVG。它会被认为是“任何”XML，它碰巧有一个名为“svg”的根元素。

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

• xmlns向svg元素添加具有适当命名空间的属性（如您所见）
• 将 a 添加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 验证器检查您的文件。确保检查检测到的 doctype 是 SVG，因为该文档可能仍然有效，但作为通用/未知 XML。- 他们也有测试页。

¹对 Chrome 53 不够好。
²不再推荐

Answer 2

删除viewBox会产生显着的语义差异,因为SVG将不再缩放(即响应UA调整大小).这仅适用于您直接查看图像,但如果您将其作为背景图像或通过SVG <image>标记或html <img>标记查看,则SVG将被绘制为具有viewBox"0 0宽度高度",除非a viewBox已经存在.

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

xml:space只有SVG文件中包含文本元素时,该属性才有用.

如果SVG是内联的,则其余的删除是良性的.如果SVG是独立文件,则需要命名空间属性,尽管背景图像也是如此.