logo标签列表

Chrome无法显示SVG文件

htmlgoogle-chromesvg
22

我在一个HTML5文件中嵌入了一个SVG插图，在本地测试时所有现代浏览器都能正常运行，但是当我尝试从网络上提供它们时，Chrome无法渲染SVG图片，只渲染SVG源代码。我已经在.htaccess文件中添加了以下行，解决了Safari和Firefox的问题：

AddType image/svg+xml svg
AddType image/svg+xml svgz
AddEncoding x-gzip .svgz

但现在Chrome是唯一一个无法渲染来自网络的图像的浏览器。

即使在Chrome中，我的本地文件也可以正常运行。

我错过了什么？

这里是问题示例的链接，尝试在Safari和Firefox上运行它，它将工作。但在Chrome中情况不同。

编辑：链接已损坏，似乎缺少www前缀：http://www.getformgallery.com/demo/gos-form.html

Chrome有什么问题吗？对我来说似乎是正常工作的。 - kgiannakakis
对我也奏效（Chrome 10.0）。 - Mike Baranczak
对我来说也是一样的，但Firefox不会显示那些上下标记。 对于这些情况，请仅使用SVG-简单而且更强大。 - Alex
你是在使用 SVG 还是 SVGZ？链接已经失效，我无法查看它。如果这是一个 SVGZ 文件，请参考这个问题，http://graphicdesign.stackexchange.com/questions/24797/when-should-i-use-svg-or-svgz-for-my-web-graphics。 - Josh Powell
6个回答
12

我有同样的问题。在某些Chrome更新之前，我在网站中使用的svg可以工作，但从某些Chrome更新开始，这些svg不起作用，页面也无法加载，只是加载了1-2秒，然后重定向到“嗨，出故障了”页面。

最终我想到了解决方法。您必须在Object标签中定义 "width" 和 "height" 属性， 例如：

<object height="100%" width="100%"data="images/image.svg" type="image/svg+xml"></object>
1
我在一个菜单中有一些SVG图标，其中只有2个在Android上的Chrome 55中加载，但桌面端没有问题。 我正在使用<img>标签，所以我的解决方法是在我的.css文件中添加“img {height：100％，width：100％}”。然后所有都可以正确呈现。我发现加载的2个SVG文件已经定义了它们自己的高度和宽度作为像素尺寸。那些无法渲染的文件使用了100％的高度/宽度，并依靠viewbox进行调整大小。 - vim_commando
我正在使用rtf.js将rtf文件渲染为html。一些图像可以正常加载，而其他图像则无法加载。我发现未能呈现的是svg标签内部的图像标签。我注意到图像标签本身的宽度和高度为0。所以@vim_commando的评论帮助我解决了这个问题。我添加了以下CSS并进行了修复。svg.rtfpict svg image { height: 100%; width: 100%; } - tolsen64
由于某种原因，width="100%" height="100%" 对我不起作用，但当我将高度更改为 height="auto" 时它就可以工作了。 - Joe B.
1

你是否使用像SVG Hero这样的扩展从Photoshop导出了SVG？如果是，你是否导出了智能对象？我也遇到了同样的问题，但通过从Illustrator保存SVG来解决了它。现在我的SVG在所有浏览器中都可以正常工作。

0
如果您正在运行lighttpd，您可能需要将svg MIME类型添加到配置文件中：
mimetype.assign             = (
  ".svg"          =>      "image/svg+xml"
)

并将样式直接设置到<img>标签中（例如：<img style="width:100%" src="picture.svg">）。

0

我使用谷歌浏览器18版，即使直接访问SVG图像，样品页面也能正常呈现。问题可能由浏览器制造商解决。

-1
-2

Chrome、Firefox、Opera、Safari和其他现代浏览器（除IE外）均原生支持SVG，无需插件。因此，如果需要插件，请首先获取并尝试访问。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接