内联 svg 未在 xhtml 中显示答案

【问题标题】：inline svg not displaying in xhtml内联 svg 未在 xhtml 中显示
【发布时间】：2026-01-17 22:40:01
【问题描述】：

我创建了一个带有内联 SVG 的 XHTML 文件。它在以 .XHTML 测试时不显示，但在以 HTML 测试时会显示。我已经搜索了互联网，并相信我指定了正确的命名空间等，但是，我对它为什么不显示感到困惑。请帮助我理解我做错了什么。

注意：我也尝试过使用或不使用 xlink，但没有发现任何变化（但是我需要 xlink，因为我需要 safari 支持）。

提前感谢您的帮助！

示例：index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
		PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http-www.w3.org/2000/svg" xmlns:xlink="http-www.w3.org/1999/xlink">

<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <title>inline svg in XHTML file</title>
</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
  <defs>
    <symbol id="icon-home" viewBox="0 0 32 32"><title>Home Icon</title>
      <path d="M32,19.271L16,5.582L0,19.271v-5.582L16,0l16,13.689V19.271z M28,18.773V32h-8v-8.817h-8V32H4V18.773l12-9.919L28,18.773z" />
    </symbol>
  </defs>
</svg>

  <div>
    <a href="#"><svg style="width:32px; height:32px;" viewBox="0 0 32 32"><use xlink:href="#icon-home" /></svg>&nbsp;home</a>
  </div>

</body>
</html>

【问题讨论】：

我建议将此代码粘贴到官方W3C Linter，因为它看起来不支持SVG。

标签： svg xhtml symbols xlink

【解决方案1】：

在最底部的<svg> 中也使用xmlns 属性，这样就可以了。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
		PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http-www.w3.org/2000/svg" xmlns:xlink="http-www.w3.org/1999/xlink">

<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  <title>inline svg in XHTML file</title>
</head>

<body>

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="0">
  <defs>
    <symbol id="icon-home" viewBox="0 0 32 32"><title>Home Icon</title>
      <path d="M32,19.271L16,5.582L0,19.271v-5.582L16,0l16,13.689V19.271z M28,18.773V32h-8v-8.817h-8V32H4V18.773l12-9.919L28,18.773z" />
    </symbol>
  </defs>
</svg>

  <div>
    <a href="#"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px; height:32px;" viewBox="0 0 32 32"><use xlink:href="#icon-home" /></svg>&nbsp;home</a>
  </div>

</body>
</html>

顺便说一句，由于 XHTML 中的 <svg> 是从 XHTML5 开始定义的，因此使用 XHTML 1.0 文档类型将无法验证（即使它可以在适当的名称空间下完美运行）。解决方案是将文档类型更改为 XHTML5。

【讨论】：

你自相矛盾。您的示例代码使用 XHTML 1.0 DOCTYPE，而您说使用 SVG 和 XHTML 1.0 DOCTYPE。
@Melab 对不起？该文件是 XHTML 文件，而不是 SVG 文件。我保留了大部分 OP 的代码，以展示我为使其工作所做的工作。简而言之，这个有效，它只是不验证 OP 的文档类型。我的结束评论是关于如何改变它以使其也有效。
有没有任何有效的方法可以使用普通的 XHTML 1.0 来做到这一点？
@Melab 不，当前形式的 SVG 在定义 XHTML 1.0 时不存在。
你可以使用外部的SVG文件作为图片，当然可以使用。

【解决方案2】：

仔细检查您使用的是.xhtml 文件扩展名，然后确保您的svg 具有以下内容：

<svg xmlns="http://www.w3.org/2000/svg">
</svg>

Source

【讨论】：