在浏览器中打开 SVG 会呈现 XML 代码而不是图像

Posted 2023-02-24

【中文标题】在浏览器中打开 SVG 会呈现 XML 代码而不是图像

【英文标题】：Opening a SVG in a browser renders XML code instead of image

【发布时间】：2012-03-08 10:01:15

【问题描述】：

我曾多次通过浏览器打开位于不同站点上的 SVG 文件，它们都显示为图像。 现在，我复制同一个 SVG，将其上传到远程主机，Google Chrome 和 Firefox 都呈现 XML 代码。 浏览器如何确定是显示图像还是显示 XML 代码？

【问题讨论】：

通常情况下，服务器会添加适当的标头以便浏览器知道文件类型。你用的是什么服务器？

如果我是正确的并且这是一个服务器配置问题，那么这里是题外话，应该很容易回答查看相应的服务器文档。

Apache（现在评论已经够长了）

【参考方案1】：

关于您的最后一个问题：浏览器如何确定是显示图像还是 XML 代码？

答案在于 XML 命名空间。 XML 标记中指定的 XML 命名空间告诉用户代理如何处理标记。因此，如果您有一个没有属性 xmlns="http://www.w3.org/2000/svg" 的 <svg>，那么浏览器将显示文本而不是 SVG 渲染的矢量图形。

【讨论】：

这是另一块拼图！

因此，如果您认为像 Bentley Microstation 这样昂贵的专业软件会满足其出口的如此简单的标准要求...

【参考方案2】：

您必须配置您的服务器以向您发送带有Content-Type: image/svg+xml 标头的svg 文件。 Here 是一个关于如何使用 Apache 执行此操作的示例。

【讨论】：

其他类型的内容是否也需要这种内容类型配置，或者只是 SVG？这并不严重

Apache 已经配置了几种 mime 类型，但当然不是全部。

@sabof 这取决于服务器软件。 Apache 通常发送带有正确标题的 SVG 图像（和大多数其他类型的内容）。您的文件扩展名是 svg 吗？或者您的服务器配置错误。

这是最新版本的 XAMPP 和一个 apache 服务器。

所以基本上发送了错误的标头，或者在这种情况下扩展名根本不重要？