Chrome无法呈现通过<img>标签引用的SVG

95

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

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

关于问题所在，这里完全迷失了。svg图像可以在IE9和FF中很好地呈现，而不能在Chrome或Safari中呈现。

我也设置了MIME类型。（图片/ 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文件作为背景图片。chrome或safari的初始页面加载均无效。当我检查元素时，右键单击svg或在另一个窗口中单击svg加载链接，该svg文件将在原始选项卡中呈现。

google-chrome  svg 
— 杰森·范·沃伦
source
1
您可以在此处举一个示例或发布一些示例代码吗？
— 西尔科（Sirko）2012年
如果您需要帮助，我们确实确实需要能够自己查看和复制此内容。
— Phrogz
您的“ Aged-Brass.svg”是否包含嵌入式图像？我遇到了同样的问题，这就是我追查到的问题……
— McGarnagle 2015年

Answers:

123

一种简单的方法；根据 https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ 您必须使用文本编辑器（如记事本）打开.SVG文件并进行更改

xlink:href="data:img/png;base64,

至：

xlink:href="data:image/png;base64,

它为我工作！

— 谢里夫·亚兹甸
source
9
这是一个可行的解决方案。使用Photoshop将智能矢量对象导出为SVG时遇到了这个问题。
— 米哈伊尔（Mikhail）
10
这节省了生命，花费了数小时试图找出问题所在。谢谢！！
— mhodges
2
同样，这解决了我的问题，也花了很多时间试图弄清楚为什么没有显示图像。
— MrEvers '19
3
我在SVG文件中没有此行代码，将其添加到<svg>标记中对我没有任何帮助。
— 皮特
2
这应该是最重要的。你救了我的日子。
— Mattia Rasulo
42

svg-tag需要名称空间属性xmlns：

<svg xmlns="http://www.w3.org/2000/svg"></svg>
— 砰
source
这个。而且我必须将其作为div的背景图像加载。
— casey
1
svg仍然需要名称空间。只要确保已在用作背景的SVG文件中定义了该文件即可。
— 爆炸
30

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

我的问题的答案是保存SVG文件。如果您从illustrator中保存了它，请确保单击“嵌入”而不是“链接”。作为链接将仅引用您的本地文件，而不包括数据（如果我理解正确的话）。 在此处输入图片说明

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

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

— 薄荷威尔士
source
1
有人知道在Photoshop中是否可以使用智能对象来执行此操作吗？经过多次尝试其他修复后，打开illustrator并在illustrator中使用此选项重新导出是让我在chrome中显示svg的唯一方法。
— Alex Podworny
2
该选项对实际的SVG代码有什么影响？
— 雅尼斯·埃默里斯（JānisElmeris）
19

我来这里是因为我有一个类似的问题，图像没有被渲染。我发现测试服务器的内容类型标头不正确。我通过将以下内容添加到我的.htaccess文件中来修复该问题：

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
— 用户名
source
1
谢谢。将Content-Type设置为image / svg + xml可以修复它。
— samir105
请注意，必须image/svg提供要下载的文件+xml。
— JakubVrána
10

使用<object>代替（当然，用您自己的URL替换每个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>
展开摘要

— 精油
source
6

将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>
— 西拉斯·帕尔默（Silas Palmer）
source
3

我能够使用您的示例创建测试页，并且效果很好。我的假设是您的svg文件有问题。您也可以在这里粘贴吗？这是我使用的示例。

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
   <g>
      <title>Layer 1</title>
      <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>
— 休息机器人
source
3

看起来像一个Chrome错误，我做了其他事情，因为这让我几乎发疯了...如果您更改了它在屏幕上显示的svg对象的css，请使用Chrom调试器。

所以我要做的是：1.检查屏幕尺寸2.听我的SVG对象的“加载”事件3.加载元素时，我使用jQuery更改了CSS 4.它为我完成了窍门

if (jQuery(window).width() < 769) {

  jQuery('object#mysvg-logo')[0].addEventListener('load', function() {
       jQuery("object#mysvg-logo").css('width','181px');
  }, true);

}
width: 180px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>
展开摘要

— 尤西·本·大卫（Yossi Ben-David）
source
2

我遇到了类似的问题，现有的答案要么不适用，要么行得通，但由于其他原因，我们无法使用它们。因此，我不得不弄清楚Chrome对我们的SVG不满意的地方。

在我们的案例中，结果是SVG文件id中的symbol标记属性中包含了一个: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>
— 迈克·威利斯
source
2

.svg图片没有初始高度和宽度。因此，它是不可见的。您必须设置它。

您可以在线或在CSS文件中执行以下操作：

排队：

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

CSS文件：

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

.image {
    width: 100px;
    height: 50px;
}
— 克尔兹斯托夫·贾尼斯泽夫斯基
source
1

我最初从Photoshop CC导出了svg，不得不手动添加

version="1.1" 进入 <svg>标签

使其在chrome上显示。

— 安迪·阮
source
1

服务器的HTTP标头中的内容类型对我来说是个问题。我添加了一个node.js服务器：

if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) {
  res.writeHead(200, { "Content-Type": "image/svg+xml" });
}

pageName是我所请求的局部变量。

我的猜测是这是一个普遍的问题！我正在使用当前版本的Chrome（2020年3月）。

— 巴德曼·古德曼
source
0

有同样的问题。如果服务器配置正确，而.htacces不是答案，则可能要查看要嵌入的svg源。我的是用文本编辑器创建的，在Chrome＆Safari上的html5代码中很好地呈现，一旦嵌入，就看不到任何东西。在svg代码中添加了正确的版本，尺寸等，并且像超级按钮一样工作。此外，所有样式都内联。

即

<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> 
  <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;"  />  
</svg>
— ku
source
0

我也得到了与镀铬相同的问题，添加后DOCTYPE它按预期工作

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

之前

    <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

后

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>
— 马丹·班达里（Madan Bhandari）
source
这两个代码段之间有什么区别？我没看到
— rgilligan
@rgilligan，我不好，第一个应该没有doctype
— Madan Bhandari
0

注意不要过渡svg图像的CSS属性

我现在不知道为什么，但是如果您在Chrome上为svg图像输入“ transition：all easy 0.3s”，则图像不会显示

例如：

* {
   transition: all ease 0.3s
  }

Chrome不呈现svg。

删除所有转换CSS属性，然后重试

— wilo087
source
0

在出现问题时，请尝试首先使用能够读取svg图像的程序来打开图像。
如果失败，则表示svg映像已损坏。

我遇到了这种情况，并将svg路径复制到新的svg图像中，并调整了svg标签的所有细节。

我从未测试过它不是渲染的原因，而是假设某些不可见的特殊符号引起了渲染错误。有时要在Mac上编辑文件，在其他情况下我已经遇到了这个问题。

— 大卫
source
0

我对通过IMG标签包含的SVG图像也遇到了同样的问题。对我来说，Chrome不希望文件顶部直接有一个空白行。

我删除了空白行，我的SVG立即开始渲染。

— pwbred
source
0

我确保添加图像的样式。对我有用

style= "width:320; height:240"

— Pensebien
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.