需要带有 xmlns 的 svg 标签？ [复制]答案

【问题标题】：svg tag with xmlns is required? [duplicate]需要带有 xmlns 的 svg 标签？ [复制]
【发布时间】：2019-02-14 08:22:44
【问题描述】：

<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">

有 xmlns= http://www.w3.org/2000/svg 这是必需的/nesesery 吗？如果是，为什么？

【问题讨论】：

标签： svg

【解决方案1】：

SVG 是一种 XML 方言。要使独立文件完全合规，它必须格式正确并以

开头

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!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" ...>

如果缺少某些部分，某些程序（想想图形编辑器、渲染库和 XML 解析器）可能无法解释它。

第二行包含 doctype 声明，只有验证解析器需要将文件内容与链接的 DTD 的结构进行比较。这将主要是不用于呈现的工具，而是用于 XML 的纯抽象解析。我知道没有需要该行的专用 SVG 渲染器。

浏览器不完全兼容 XML。对于独立的 SVG 文件，您可以在 XML 序言中省略第一行。事实上，大多数渲染器在没有它的情况下仍然可以工作。但是如果你不使用命名空间属性，即使浏览器也不会渲染文件，而是会出现以下消息：

此 XML 文件似乎没有任何关联的样式信息。文档树如下所示。

请记住，数据 URI 也被视为独立文件，如果其 mime 类型为 image/svg+xml，则需要引用命名空间属性。

如果您在 HTML 文档中使用 <svg> 元素，则所有这些都不适用。 <svg> 元素被定义为 HTML 元素，并且 HTML 不要求 XML 格式正确。即使没有命名空间声明，浏览器也会呈现 SVG 内容（如果它们实现了 SVG）。

这并不是说他们完全忽略了命名空间。 HTML5 规范说：

为使作者能够使用仅接受 XML 形式的 SVG 的 SVG 工具，鼓励交互式 HTML 用户代理提供一种将任何 SVG 片段导出为 XML 命名空间格式良好的 XML 片段的方法。

例如这个 javascript 代码

var svgRoot = document.querySelector('svg');
var xmlString = new XMLSerializer().serializeToString(svgRoot);

将导出一个包含命名空间属性的字符串。

而且，更重要的是，使用以下代码

var svg = document.createElement('svg');
document.querySelector('body').appendChild(svg);

SVG 内容将无法正确呈现。当元素附加到 DOM 树时，它不会被识别为 SVG 内容，而是被视为自定义 HTML 元素。相反，您需要这样做：

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
document.querySelector('body').appendChild(svg);

重要提示：每次都需要 .createElementNS() 来自 SVG 命名空间（<rect>、<g>、<use>、... ) 是新创建的，不仅针对根 <svg> 元素。

【讨论】：