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

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"属性是:

• 所需的图像/ SVG + XML文件.¹
• 可选的内联 <svg>.²

该xmlns:xlink="http://www.w3.org/1999/xlink"属性是:

• 带有xlink: attributes的image/svg + xml文件是必需的.¹
• 可选的内联 <svg>用的XLink:属性.²

该version="1.1"属性是:

• 建议遵守image/svg + xml文件标准.³
• 显然每个用户代理都忽略了它.⁴
• 除去在SVG 2. ⁵

¹ 国际化资源标识符(RFC3987)
² 自HTML5
³ 可扩展标记语言(XML)1.0
⁴可能直到发布更多主要版本.
⁵ SVG 2,W3C候选人推荐,2018年8月7日

Answer 2

所有用户代理(浏览器)都会忽略版本属性,因此您可以随时删除它.

如果您将SVG内嵌在HTML页面中并提供该页面,text/html则不需要xmlns属性.在HTML文档中嵌入SVG内嵌是一项相当新的创新,是HTML5的一部分.

但是,如果您将页面作为image/svg + xml或application/xhtml + xml或任何其他导致用户代理使用XML解析器的MIME类型提供,则需要xmlns属性.这是直到最近做事的唯一方法,因此有很多内容像这样服务.

Answer 3

我想同时添加两个答案，但是我没有任何意义，我要添加一个新答案。在Chrome的最新测试中（版本63.0.3239.132（正式版本）（64位Windows）），我发现：

1. 对于通过文本编辑器或javascript和elm.innerHTML直接输入到HTML文件中的内联SVG，则不需要其他两个答案中所述的xmlns属性。
2. 但是对于通过javascript和AJAX加载的嵌入式SVG，有两种选择：
   • 使用xhr.responseText和elm.innerHTML。这不需要xmlns。
   • 使用xhr.responseXML.documentElement和elm.appendChild()或elm.insertBefore()。这种创建内联SVG的方法会产生未完成的结果，而无需声明基本的SVG名称空间，如中所述xmlns="http://www.w3.org/2000/svg"。<svg>加载到HTML中，但是文档级功能，例如getElementById()<svg>元素无法识别。我认为这是因为它在HTML之外使用XMLHttpRequest XML解析器。