为什么 SVG 标签中需要像 XMLNS 这样的复杂元素？

Question

我正在创建 SVG。 SVG 标签如下所示：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">

如果我将其替换为简单的 <svg width="800" height="800"> 标记，文档将是空白的。在 Chrome 中，如果我去掉上面的标签而不是 XMLNS，它就会起作用。在 IE11 中，只要我拿走任何东西（DOCTYPE、XMLNS、PUBLIC...），文档就是空白的。为什么我需要这么复杂的元素？

Answer 1

不需要它们。诀窍是您需要使用 text/html 的 mime 类型而不是 image/svg+xml（或任何其他 XML mime 类型）。

<!doctype html>
<svg width="500" height="350">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
</svg>

如果您使用 XML mime 类型，那么 XML 支持命名空间，您必须定义它们，因此需要 xmlns 属性来区分 <a>是具有 src 属性的 html <a> 或具有 xlink:href 属性的 SVG <a> 元素。 HTML 只是神奇地猜测。

Answer 2

SVG 文件是 XML 文件。因此，当它们是独立文件时，它们需要某种前导码，以便无论对其进行解析，都知道要做什么。所以独立的 SVG 文件至少需要有 xmlns 属性。浏览器需要那个。但是，除非您想进行适当的 XML 验证，否则 DocType 不是必需的。

当 SVG 内嵌在 HTML 页面的正文中时，您不需要任何一个。 HTML 解析器知道 SVG 内容并知道要做什么。

为什么 SVG 标签中需要像 XMLNS 这样的复杂元素？

Why are complicated elements like XMLNS needed in the SVG-tag?

svg