在 SVG 中插入网站图标链接标签的正确方法 [重复]答案

【问题标题】：Correct way to insert favicon link tag in SVG [duplicate]在 SVG 中插入网站图标链接标签的正确方法 [重复]
【发布时间】：2014-02-10 22:23:27
【问题描述】：

插入指向网站图标的链接标签的正确方法是什么？我尝试了以下方法，但 W3C Validator 报告 element "xhtml:link" undefined。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <title>De mægtige vikinger</title>
  <defs>
    <xhtml:link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </defs>
</svg>

【问题讨论】：

@RobertLongson 我不相信 W3C 验证器是错误的，并且您链接到的答案不能回答我的问题。不过谢谢
请参阅 SVG 工作组规范中的 this GitHub issue。

标签： xml svg w3c-validation

【解决方案1】：

来自An XHTML + MathML + SVG Profile Specification

在 MathML 上只允许使用 MathML 和 XLink 命名空间声明元素，并且不能声明 XHTML 或 SVG 命名空间。

所以本质上，@ErikDahlström 关于新的验证配置文件是正确的。但是，公共领域中的一个已经存在。 http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd 它缺少 XLINK 定义，但我们可以轻松添加它。

解决方案比较冗长，但这就是 XML 的本质。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC
    "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
    "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"[
<!ENTITY % XLINK.xmlns "http://www.w3.org/1999/xlink" >
<!ENTITY % SVG.prefixed "IGNORE" >
<!ENTITY % XHTML.prefixed "INCLUDE" >
<!ENTITY % XHTML.prefix "xhtml" >
<!ENTITY % MATHML.module "IGNORE" >
]>
<svg version="1.1" id="denmark" viewBox="0 0 1280 800" preserveAspectRatio="xMidYMid slice"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <title>De mægtige vikinger</title>
  <switch>
    <foreignObject width="0" height="0">
      <xhtml:link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
     </foreignObject>
  </switch>
  <script type="application/ecmascript" xlink:href="js/lib/svg.js"></script>
</svg>

以上内容将在W3C Validator 中生效。 最终更新：W3C Validator 实际上不会验证上述内容，因为它说xmlns 属性不存在。如果未设置，则任何浏览器都不会呈现 SVG，因此这显然是 W3C Validator 中的一个错误。

注意事项

由于我找不到没有 MathML 的 DTD，而且我不需要它，我只是选择忽略它。因此：<!ENTITY % MATHML.module "IGNORE" >

我用 xhtml + math + svg 找到的 dtd 没有 XLink（我们需要能够添加脚本），所以它包含在：<!ENTITY % XLINK.xmlns "http://www.w3.org/1999/xlink" >

在使用 Firefox、Safari 时，网站图标可以正常工作。它从未在 IE 中工作过，但我怀疑图形设计师使用的是 png 而不是位图。在 Chrome 和 Safari 上，这仅在本地未提供服务时才有效。

~~这里是临时示例：http://www.demægtigevikinger.dk/prototype/v0.5/~~ - 网站不再在线

【讨论】：

糟糕。我刚刚偶然发现w3.org/blog/systeam/2008/02/08/w3c_s_excessive_dtd_traffic，它说 W3C 正受到 DTD 请求的轰炸。这可能是一个糟糕的解决方案。

【解决方案2】：

验证器本身并没有错，因为您拥有的不是纯 svg，而是 svg 加上一些 xhtml，而验证器没有这样的配置。在我看来，您有两种选择：

接受现在浏览器中的情况，并为此用例创建新的验证配置文件/自定义 DTD。
通过更改标记并删除 xml 标头并设置 <!DOCTYPE html>，将 svg 传递为 html5。然后，您可以像往常一样将链接放在头部。请注意，这可能意味着您将无法将文件作为 svg 引用（因为它是 html），因此请务必在您定位的所有浏览器中进行测试。

【讨论】：

我看不出有什么办法解决这个问题。但我想谈谈你的两个建议。 1) xmlns:xhtml 应该是链接标签的正确 XML 命名空间。 2) 可能是一种选择，但纯 SVG 网站除了 HTML(5) 之外还有其他不错的属性。