为什么 SVG 不适用于本地 HTML 文件？答案

【问题标题】：Why doesn't SVG work on local HTML files?为什么 SVG 不适用于本地 HTML 文件？
【发布时间】：2016-05-11 23:30:32
【问题描述】：

我很困惑。

如果我通过浏览器（OSX 上的 Chrome 或 Safari）指向这个网站，它会完美地显示所有 SVG：

http://emacsformacosx.com/

现在，如果我在该页面上查看源代码，将其复制并粘贴到我桌面上的新 HTML 文档中，然后使用任一浏览器查看，我根本就看不到 SVG。

为什么不一样？

为什么 SVG 可以在网站上运行，但不能在本地 HTML 文件中运行？

谢谢！

【问题讨论】：

标签： html svg xhtml

【解决方案1】：

您将其重命名为 HTML，并且浏览器假定为 html 内容.. 而页面为 text/xml ..

如果你把它重命名为.xml并打开它，你会看到它就好了..

【讨论】：

已确认。在 Mac OS X 10.6.2 上使用此方法复制和修复
有趣。所有 HTML5 文档都应该有一个 .xml 扩展名，还是这只是在文档中包含 SVG 的一个功能？
我只是玩弄了一下，似乎 FF 和 Chrome 也使用 .xhtml 扩展名正确呈现......他们不接受文件内部的内容定义似乎完全错误（例如元标记..），但似乎是这样..
@Axeva，我不知道.. 还没有使用过 html5.. 所以我没有这方面的经验.. 你可以做一些测试并告诉我们:)

【解决方案2】：

HTTP 响应头信息使浏览器将信息解释为 XML：

HTTP/1.1 200 OK
Date: Sun, 21 Feb 2010 02:32:02 GMT
Server: Apache/2.2.14 (Debian)
Vary: Accept-Encoding
Transfer-Encoding: chunked
Content-Type: text/xml; charset=UTF-8

你看，提供页面的服务器足够聪明，可以检测到这是一个 XML 文档，并告诉浏览器。当您从磁盘加载文件时，您的浏览器可能不够智能，无法执行此操作，并且倾向于依赖文件的扩展名来提供此信息。

您可以尝试在<head> 元素中插入以下内容：

<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />

你看到我在那里做了什么吗？它只是指定文档类型和编码的 HTTP 响应标头的镜像。

这个标签的目的是让浏览器认为，“嘿，服务器告诉我这个文档是 HTML，但是文档告诉我它是 XML。文档可能比服务器更了解，所以我会相信它... ::解释为 XML::"

【讨论】：

应该是这样，但不幸的是它不是......它仍然无法正确呈现它......
不幸的是，盖比是对的。它不起作用。您提出了一个优雅的解决方案 Amphetamachine，但浏览器忽略了它。令人沮丧。