访问localhost时SVG无法正常工作。为什么？

Question

有人知道为什么在本地tomcat服务器上托管时，此页面http://emacsformacosx.com/中的相同代码无法呈现？

我正在尝试使用某些SVG，但无法让它在本地运行。有什么想法吗？

Answer 1

该页面是XHTML，因此应该使用适当的Content-Type标头。如果页面以text / html的形式提供，那么Firefox和Chrome（我签入的唯一两个）将无法识别SVG工作所需的XML名称空间。

虽然正在使用标题

提供实时页面

Content-Type: text/xml; charset=UTF-8

严格来说，这不是正确的。在我的测试中，用

服务

Content-Type: application/xhtml+xml; charset=UTF-8

使其正确呈现，并且是XHTML的合适类型。

请注意，您必须检测服务器上的Internet Explorer（以及其他不了解XHTML的浏览器），并将内容类型更改为text/html - 如果显示application/xhtml+xml内容类型IE将提示用户下载文件;对于text/xml，它将显示漂亮的XML文档树（虽然偶尔会混淆并设法通过内容嗅探正确显示HTML）。

编辑：正如编码所说，如果你想提供原始的SVG文件，你需要使用SVG内容类型，但在这种情况下，文件实际上是XHTML，内联SVG在一个单独的命名空间中，所以XHTML类型是对的。

Answer 2

您可能需要设置服务器以便为SVG提供正确的MIME类型：image / svg + xml

此处有更多信息：http://www.planetsvg.com/tools/mime.php

Answer 3

正如NickFitz和编码读者所提到的，要使嵌入式SVG正常工作，您的页面需要作为application/xhtml+xml提供。使用Tomcat至少有三种实现方法：

1. 编辑服务器或应用程序web.xml以更改默认MIME类型，或更改特定文件扩展名的MIME type。
2. 如果您的网页是JSP，请在page directive
中设置contentType
3. 如果您希望根据HTTP请求（set the contentType dynamically）中发送的HTTP_ACCEPT标头I blogged this approach in the context of mobile devices来容纳IE用户。

或者，将SVG内容拆分为单独的文件，然后页面的内容类型无关紧要。 IE不会渲染SVG，但它至少会显示页面的其余部分。您可以将所有SVG带出页面及其链接，但仍有some browser compatibility issues。

最后，如果您只想查看一个静态页面，其中包含嵌入式SVG的本地硬盘而不涉及任何服务器，则将文件扩展名从.html更改为.xhtml可能会有效。

Answer 4

如果您使用的是Apache服务器，则可以指示which mime type用于这些图像，只需将这两行添加到您的.htaccess文件中：

AddType image/svg+xml svg svgz
AddEncoding gzip svgz