Question

在互联网上看到的大约一半的svg示例中，代码都包含在简单的<svg></svg>标签中。

在另一半中，svg标签有很多复杂的属性，如下所示：

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  version="1.1" 
  xmlns:xlink="http://www.w3.org/1999/xlink">

我的问题是：使用简单的svg标签是否可以？我试过玩复杂的游戏，如果我不把它们包括在内，一切都运行正常。

Answer 1

xmlns="http://www.w3.org/2000/svg"属性为：

image / svg + xml

必需。 ¹

内置

<svg>

可选。 ²

xmlns:xlink="http://www.w3.org/1999/xlink"属性为：

必需 image / svg + xml 文件，带有 xlink：属性。 ¹ 使用 xlink：属性的内联 <svg>
可选。 ²

version="1.1"属性为：

推荐符合 image / svg + xml 文件标准。 ³

显然被每个用户代理忽略。 ⁴

在SVG 2中删除。⁵

¹ Internationalized Resource Identifiers (RFC3987)
² Since HTML5
³ Extensible Markup Language (XML) 1.0
⁴可能直到其他主要版本发布 ⁵ SVG 2, W3C Candidate Recommendation, 07 August 2018

Answer 2

所有用户代理（浏览器）都会忽略版本属性，因此您可以随时删除它。

如果您将SVG内嵌在HTML网页中，并将该页面作为text/html然后xmlns attributes are not required投放。在HTML文档中内嵌SVG是一项相当新的创新，是HTML5的一部分。

但是，如果您将页面作为image / svg + xml或application / xhtml + xml或任何其他导致用户代理使用XML解析器的MIME类型，则the xmlns attributes are required。这是直到最近才开展工作的唯一方式，所以有很多内容都是这样的。

Answer 3

我想补充两个答案，但我没有分数，我正在添加一个新答案。在最近的Chrome测试（版本63.0.3239.132（官方版本）（64位Windows））中，我发现：

对于通过文本编辑器或javascript和elm.innerHTML直接输入HTML文件的内联SVG，xmlns属性不是必需的，如其他两个答案中所述。
但对于通过javascript和AJAX加载的内联SVG，有两种选择：
- 使用xhr.responseText和elm.innerHTML。这不需要xmlns。
- 使用xhr.responseXML.documentElement和elm.appendChild()或elm.insertBefore()。这种创建内联SVG的方法在没有声明基本SVG名称空间的情况下产生半成品结果，如xmlns="http://www.w3.org/2000/svg"中所示。＆lt; svg＆gt;加载到HTML中，但在＆lt; svg＆gt;上无法识别文档级函数，例如getElementById()。元件。我认为这是因为它在HTML之外使用XMLHttpRequest XML解析器。

Answer 4

关于MDN cbstorages.所说的SVG版本属性

从SVG 2开始不推荐使用
不再推荐使用此功能。虽然   一些浏览器可能仍支持它，它可能已被删除。   来自相关网络标准的信息，可能正在   丢弃，或仅出于兼容性目的而保留。避免使用   它，并在可能的情况下更新现有代码；请参阅兼容性表   本页底部以指导您做出决定。请注意，   功能可能会随时停止工作。

version属性用于指示SVG的规格   文件符合。仅允许在根元素上使用。它   完全是建议性的，对渲染或处理没有影响。

PS：SVG 2尚未成为标准。

是否需要SVG参数，例如'xmlns'和'version'？

4 个答案: