Html Chrome 未显示 SVG 文件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5321984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:22:58  来源:igfitidea点击:

Chrome not showing a SVG file

htmlgoogle-chromesvg

提问by user661987

I have a SVG ilustration embeded in an HTML5 file which works in all modern browsers when I try it on local, but when I try to serve them from the web I dont get Chrome to render the SVG image, it only renders the SVG source code. I already added this lines to an .htaccess file which solved the issues in Safari and Firefox:

我有一个嵌入在 HTML5 文件中的 SVG ilustration,当我在本地尝试时,该文件适用于所有现代浏览器,但是当我尝试从网络上提供它们时,我没有让 Chrome 渲染 SVG 图像,它只渲染 SVG 源代码. 我已经将此行添加到 .htaccess 文件中,该文件解决了 Safari 和 Firefox 中的问题:

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

But Chrome now is the only browser that doesn't render the image when comes from the web. My local file works fine even in Chrome.

但是 Chrome 现在是唯一一个在来自网络时不呈现图像的浏览器。即使在 Chrome 中,我的本地文件也能正常工作。

What am I missing?

我错过了什么?

Here is the link to the sample of the issue, try it on Safari and Firefox, it will work. But in Chrome the story is different.

这是问题示例的链接,在 Safari 和 Firefox 上尝试,它会起作用。但在 Chrome 中,情况就不同了。

EDIT: Link was broken and seems to be missing www. prefix: http://www.getformgallery.com/demo/gos-form.html

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

回答by Niraj Shakya

I have the same problem. Before some Chrome updates the svg I used in my site works but from certain Chrome updates those svg didn't worked and the page won't load either, just loads for 1-2s and then redirected to Aw, snap.

我也有同样的问题。在某些 Chrome 更新我在我的网站中使用的 svg 之前,我在我的网站上使用的 svg 可以工作,但是从某些 Chrome 更新中,这些 svg 没有工作,页面也不会加载,只加载 1-2 秒,然后重定向到 Aw,snap。

Finally I figure it out. You have to define "width" and "height" in Object tag eg.

最后我想通了。您必须在对象标签中定义“宽度”和“高度”,例如。

<object height="100%" width="100%"data="images/image.svg" type="image/svg+xml"></object>

回答by rjtkoh

Did you export the SVG from Photoshop using an extension like SVG Hero? If so, did you export a smart object? I had the same problem, but fixed it by saving the SVG from Illustrator instead. Now my SVG works in all browsers.

您是否使用 SVG Hero 等扩展程序从 Photoshop 导出 SVG?如果是这样,您是否导出了智能对象?我遇到了同样的问题,但通过从 Illustrator 保存 SVG 来修复它。现在我的 SVG 适用于所有浏览器。

回答by Jarvix

I am using Google Chrome 18 and the sample-page renders fine for me, even after going to the SVG image directly. The problem might be solved by the browser-makers.

我正在使用 Google Chrome 18,即使在直接转到 SVG 图像之后,示例页面对我来说也很好。浏览器制造商可能会解决这个问题。

回答by vicky

SVG files are supported in chrome but are not supported fully. You might have some issue sometimes. Try this link to get help to your answer.

Chrome 支持 SVG 文件,但不完全支持。您有时可能会遇到一些问题。试试这个链接以获得答案的帮助。

http://upload.wikimedia.org/wikipedia/commons/f/f6/Western_Australia_Local_Government_Areas.svg

http://upload.wikimedia.org/wikipedia/commons/f/f6/Western_Australia_Local_Government_Areas.svg

回答by user3209468

Chrome, Firefox, Opera, Safari and all other modern browsers (with the exception of IE) support SVG natively without the need for plugins. so you get plugin First and try do access

Chrome、Firefox、Opera、Safari 和所有其他现代浏览器(IE 除外)本身就支持 SVG,无需插件。所以你首先获得插件并尝试访问