logo标签列表

Chrome无法通过<img>元素渲染SVG文件

google-chromesvg
144

我遇到了Google Chrome不使用img元素渲染SVG的问题。这种情况发生在刷新页面和初始页面加载时。我可以通过“检查元素”然后右键单击SVG文件并在新标签页中打开SVG文件来显示图像。然后，SVG图像将在原始页面上呈现。

<img src="../images/Aged-Brass.svg">

我完全不知道问题出在哪里。这个svg图片在IE9和FF中渲染得很好，但在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;
        }

        #image_element {
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="image_element">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>

如你所见，我正在尝试在img元素和CSS的背景图像中都使用一个svg文件。 在Chrome或Safari的初始页面加载时，两者都无法正常工作。 当我右键单击SVG或单击链接来在另一个窗口中加载SVG时，SVG文件将在原始标签中呈现。

1
你能否提供一个示例或在这里发布一些示例代码？ - Sirko
1
如果你想要帮助，我们确实需要能够自己看到并复现这个问题。 - Phrogz
你的“Aged-Brass.svg”文件中是否包含嵌入式图像？我也遇到了同样的问题，跟踪后发现是这个原因... - McGarnagle
1
Chrome浏览器无法显示SVG图像，如果在SVG源代码中没有带有值的width属性。请编辑您的SVG源代码并添加所需值的width属性。 - Hasanuzzaman Sattar
28个回答
186
1
我的SVG文件中根本没有图像标签，而是由<path>、渐变和线条标签组成的一组元素。我该如何解决这个问题？ - Suraj Ingle
1
根据官方文档 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href ，xlink:href已经被弃用。你应该使用href代替xlink:href。 - kentuckyss
1
请您详细说明一下这个标签的完整形式，我已经看到两次有人展示了这个例子并且有开放引号。这个标签的完整形式是什么样子？xlink:href="data:image/png;base64,/path/to/image.png"? - Gloat
79

svg标签需要命名空间属性xmlns：

<svg xmlns="http://www.w3.org/2000/svg"></svg>
这个。而且我必须将它作为div的背景图像加载。 - casey
1
SVG仍然需要命名空间。只需确保它在您用作背景的SVG文件中定义即可。 - bang
31

我来到这里是因为遇到了类似的问题，图片无法被渲染。后来我发现我的测试服务器的内容类型标头不正确。通过在我的 .htaccess 文件中添加以下内容，我解决了这个问题：

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
4
谢谢。将 Content-Type 设置为 image/svg+xml 就解决了问题。 - samir105
请注意，如果image/svg提供下载文件，则必须具有+xml。 - Jakub Vrána
在我的情况下，我正在将SVG上传到Amazon S3。将内容类型设置为“image/svg+xml”对我有用。感谢您让我走上了正确的轨道！ - patrickbadley
30

我来到这里是因为我遇到了同样的问题， 当我检查元素时，可以看到文件，但在站点上无法显示（即使在使用本地主机时）

我的问题的答案在于保存SVG文件。 如果你从Illustrator中保存它，请确保点击“嵌入”而不是“链接”。因为链接只会引用您的本地文件而不包含数据（如果我理解正确的话）。 进入图像描述

我在Adobe网站上阅读了有关此问题的信息，该网站提供了一些其他有用的导出提示 http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

这对我有用，希望对您有用。

1
有没有人知道在Photoshop中是否有使用智能对象的方法来完成这个操作？在多次尝试其他修复方法后，打开Illustrator并使用其选项重新导出是唯一让我在Chrome中展示SVG的方法。 - Alex Podworny
6
那个选项对实际的SVG代码有什么影响？ - Jānis Elmeris
赞同@JānisElmeris的评论-这一定会对SVG代码本身产生一些影响，才能突然起作用。 - bsplosion
这会使你的SVG文件变得臃肿。 - Jithin Pavithran
15

请使用<object>替代（当然，将每个URL替换为您自己的）：

.BackgroundImage {
        background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
        width: 400px;
        height: 600px;
}
<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>
</head>
<body>
    <div id="ObjectTag">
        <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600">
          Your browser does not support SVG.
        </object>
    </div>
    <div class="BackgroundImage"></div>
</body>
</html>

15

我遇到了类似的问题，但现有的解答要么不适用，要么虽然能用但由于其他原因我们无法使用。所以我不得不弄清楚Chrome对我们的SVG文件有哪些不喜欢的地方。

在我们的情况下，问题出在SVG文件中symbol标签的id属性上有一个:，这是Chrome不喜欢的。一旦我去掉了:，它就正常工作了。

坏的：

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt"
    />
</svg>

好的：

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="NoMoreColon">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#NoMoreColon"
    />
</svg>
2
这就是它！[四倍规则点赞] - davidfloyd91
1
救命稻草。你知道这是为什么吗？ - kevindeleon
1
@kevindeleon 我之前不知道为什么，但我刚刚搜索了一下，找到了这个似乎能够解决问题的SO答案：https://dev59.com/6msMtIcB2Jgan1zntEPE#69805130 - Mike Willis
11

将width属性添加到[svg]标签中（通过编辑svg源XML），对我有效：

例如：
<!-- This didn't render -->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

<!-- This did -->
<svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg">
...  
</svg>
10

.svg 图像没有初始高度和宽度，因此不可见。您需要设置它。

您可以使用内联或CSS文件进行设置：

内联方式：

<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">

<img src="../images/Aged-Brass.svg" class="image" alt="logo">


.image {
    width: 100px;
    height: 50px;
}
10

我在从figma导出图像时遇到了这个问题。检查svg的源代码，如果像这样的id中有冒号:：id="paint1_linear_23:318"，它会导致在Chrome中渲染时出现问题。

只需删除所有id中的冒号即可。

不要忘记对引用这些id的地方进行相同的处理，如此处：fill="url(#paint1_linear_23:318)"。

对我也起作用了！非常感谢！ - nvipash
救命稻草.. SVG 中的冒号会导致 Chrome 无法渲染 SVG。 - RRR
7

我曾经遇到过同样的问题。当我检查被接受和设置在头部中的文件类型时，该问题得以解决，即 "Content-Type"，"image/svg+xml":

response.setHeader("Content-Type", "image/svg+xml");
2
你在哪里设置这个？ - Nikolai Hegelstad
对于未来的读者：这是一个服务器端的更改，在这种情况下可能涉及一些基于Java的HTTP服务器。 - Christian Brüggemann
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接