33

在 HTML5 中使用 SVG 时：SVG 是否<?xml version="1.0" encoding="UTF-8"?>需要XML 声明

  • 通过图像<img>或
  • 作为 CSSbackground-image的？

这与“<a href="https://stackoverflow.com/questions/18467982/are-svg-parameters-such-as-xmlns-and-version-needed">是SVG参数如'xmlns'和需要'版本'”。两个答案和MDN 命名空间速成课程根据需要澄清了命名空间问题。

但是 SVG 1.1 不包括关于 XML 声明的必要性或何时可以省略的声明？

没有声明的例子：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <circle id="circle--red" cx="30" cy="30" r="30" fill="#f00"/>
</svg>

2016-07-04 更新：澄清了关于XML 声明的问题。谢谢@Martin Honnen！ 2017-10-24 更新：更改为“UTF-8”大写和 SVGO 优化的属性顺序。

4

2 回答 2

25

对于 HTML5，正确的DOCTYPE 声明是

<!DOCTYPE html>

需要为浏览器指定全标准模式。

你所展示的，

<?xml version="1.0" encoding="utf-8"?>

是一个XML 声明。它对于 XML 1.0 是可选的，对于XML 1.1 是必需的，但是

  • XML 1.1 并未广泛使用。
  • version="1.0"并且encoding="utf-8"无论如何都是默认值。

当您希望指定不同的编码时，请使用 HTML5 中的 XML 声明，尤其是当文件可能不仅被浏览器使用，而且还被 XML 处理器使用时。

有关更多信息，请参阅HTML5：HTML 和 XHTML 的词汇表和相关 API。

关于内部 SVG 的注意事项（感谢@Quentin）：嵌入在 HTML5 文档中的 SVG 不应具有独立的 XML 声明。格式正确的 XML 中只允许有一个XML 声明，并且它必须在顶部（如果在任何地方）。有关 XML 声明放置要求的更多详细信息， 请参阅此答案。

关于外部 SVG 的注意事项（感谢@Kaiido）：通过 HTML5img或 CSS引用的 SVGbackground-images必须有自己的 XML 声明，并且应该使用以下 DOCTYPE 声明：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

关于外部 SVG（更新）的注意事项（感谢@user314159）：

每1.3。可缩放矢量图形 (SVG) 2 W3C 工作草案的SVG 命名空间和 DTD 2015 年 7 月 9 日：

本规范中没有提供 DTD，因为已知使用 DTD 来验证文档是有问题的。特别是，DTD 不能优雅地处理名称空间，并且它们可以表达的约束范围是有限的。建议作者不要在 SVG 文档中包含 DOCTYPE 声明。

[强调补充。]

于 2016-07-03T16:50:45.713 回答
5

我在这里找到了不需要 XML 和 DOCTYPE 声明的信息https ://oreillymedia.github.io/Using_SVG/extras/ch01-XML.html...

仅当您使用非 Unicode 字符编码（技术上是 UTF-8 或 UTF-16 以外的任何字符）时，才需要 XML 声明。

您还可以包含 SGML DOCTYPE 声明，但不再推荐用于 SVG。

于 2020-02-07T16:15:24.830 回答