Chrome无法通过< img>引用SVG引用标签 [英] Chrome not rendering SVG referenced via <img> tag
问题描述
我遇到的问题是Google Chrome浏览器无法使用img标记呈现svg。刷新页面和初始页面加载时会发生这种情况。我可以通过Inspecting Element显示图像，然后右键单击svg文件并在新选项卡中打开svg文件。然后，svg图像将显示在原始页面上。
< img src =../ images / Aged-Brass .SVG>
完全不知道问题在哪里。在IE9和FF中，svg图像可以很好地呈现在Chrome或Safari中。
我也设置了我的MIME类型。 （image / svg + xml）
编辑：
这是一个简单的html页面，可以帮助我解释我的问题。
<！DOCTYPE html>
< html>
< head>
< title> SVG Test< / title>
< style>
#BackgroundImage {
background：url（'../ images / Aged-Brass.svg'）no-repeat scroll left top;
width：400px;
height：600px;
}
#ImageTag {
width：400px;
height：600px;
margin：0px;
padding：0px;
}
< / style>
< / head>
< body>
< div id =ImageTag>
< img src =../ images / Aged-Brass.svg>
< / div>
< div id =BackgroundImage>< / div>
< / body>
< / html>
正如您所看到的，我尝试在img标签和css中使用svg文件背景图片。无论是在铬或Safari浏览器的初始页面加载工作。当我检查元素的右键单击svg或单击链接到svg在另一个窗口中加载svg文件将在原始选项卡中呈现。
我来到这里，因为我有同样的问题，
当我检查元素，我可以看到该文件，但在网站上我不能（即使使用本地主机）
我的问题的答案是保存SVG文件。
如果您从插画中保存它，请务必点击嵌入而不是链接。因为链接只会引用您的本地文件而不是包含数据（如果我理解正确）。
$
我在adobe网站上阅读了这个文档，其中提供了一些有用的提示，用于导出
http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
这对我有效，希望它有用。
I am having issues with google chrome not rendering svg with an img tag. This happens when refreshing the page and initial page load. I can get the image to show up by "Inspecting Element" then right clicking the svg file and opening the svg file in a new tab. The svg image will then be rendered on the original page.
<img src="../images/Aged-Brass.svg">
Totally at loss here as to what the issue is. The svg image renders fine in IE9 and FF just not in Chrome or Safari.
I have my MIME types set as well. (image/svg+xml)
EDIT: Here is a simple html page that I built to help illustrate my issue.
<!DOCTYPE html>
<html>
<head>
<title>SVG Test</title>
<style>
#BackgroundImage{
background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
width: 400px;
height: 600px;
}
#ImageTag{
width: 400px;
height: 600px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="ImageTag">
<img src="../images/Aged-Brass.svg">
</div>
<div id="BackgroundImage"></div>
</body>
</html>
As you can see I am trying to use an svg file in both an img tag and in css as a background image. Neither work on the initial page load in chrome or safari. When I inspect element right click svg or click link to svg load in another window the svg file will render in original tab.
i came here because i had the same problem, when i inspect the element i can see the file, but on the site i can't (even when using localhost)
the answer to my problem was in saving the SVG file. If you saved it from illustrator make sure to click 'embed' and not 'link'. as link will just refer to your local files rather than include the data (If i understand it correctly).
I read about it on the adobe website which has some other useful tips for exporting http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html
This worked for me, hope it was useful.
这篇关于Chrome无法通过< img>引用SVG引用标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
