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

时间：2012-05-24 12:04:22

标签： google-chrome svg

我遇到谷歌浏览器没有使用img标记呈现svg的问题。刷新页面和初始页面加载时会发生这种情况。我可以通过“Inspecting Element”显示图像，然后右键单击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文件将在原始选项卡中呈现。

23 个答案:

答案 0 :(得分：31)

一种简单的方法；根据 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,

对我有用！

答案 1 :(得分：25)

我来到这里是因为我有同样的问题， 当我检查元素我可以看到文件，但在网站上我不能（即使使用localhost）

我的问题的答案是保存SVG文件。 如果您从插图画家保存，请务必点击“嵌入”。而不是＆＃39;链接＆＃39;。因为链接只会引用您的本地文件而不是包含数据（如果我理解正确的话）。 enter image description here

我在adobe网站上看到了它，它有一些其他有用的出口提示 http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

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

答案 2 :(得分：24)

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

<svg xmlns="http://www.w3.org/2000/svg"></svg>

答案 3 :(得分：13)

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

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

答案 4 :(得分：6)

使用<object>代替（当然，用您自己的网址替换每个网址）：

＆＃13;
＆＃13; 
.BackgroundImage {
        background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
        width: 400px;
        height: 600px;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：2)

我遇到了同样的问题。当我检查接受并在标题“Content-Type”、“image/svg+xml”中设置的文件类型时，这个问题就解决了：

response.setHeader("Content-Type", "image/svg+xml");

答案 6 :(得分：2)

我能够使用您的示例创建一个测试页面，它运行得很好。我的假设是你的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>

答案 7 :(得分：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>

答案 8 :(得分：2)

看起来像是一个Chrome bug， 我做了别的事，因为我差点因此而疯狂...... 如果你改变它在屏幕上显示的svg对象的css，使用Chrom调试器。

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

IEnumerable<T>
if (jQuery(window).width() < 769) {

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

}
width: 180px;

答案 9 :(得分：1)

将width属性添加到[svg]标记（通过编辑svg源XML）对我有用： 例如：

if ((context.Email1.value) !== (context.Email2.value)) { 
    return true; 
} else { 
    return false; 
}

答案 10 :(得分：1)

我最初是从Photoshop CC导出svg的，因此必须手动添加

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

使其在chrome上显示。

答案 11 :(得分：1)

就我而言，当我使用Photoshop创建并保存svg时，此问题仍然存在。 有用的是，使用Illustrator打开了文件，然后导出了svg。

答案 12 :(得分：1)

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

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

pageName是我请求的本地变量。

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

答案 13 :(得分：1)

对我来说，将img的宽度/高度设置为有效。 <asp:Image runat="server" ID="Icon" Style="max-width: 50px; max-height: 50px; position: relative;" />

答案 14 :(得分：0)

在添加DOCTYPE之后，我也遇到了与chrome相同的问题，它按预期工作

<!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>

答案 15 :(得分：0)

<m:Table id="imageTable"> <m:headerToolbar> <m:OverflowToolbar> <m:Title text="some text"/> </m:OverflowToolbar> </m:headerToolbar> <m:columns> <m:Column> </m:Column> </m:columns> </m:Table> 图像没有其初始高度和宽度。因此，它是不可见的。您必须进行设置。

您可以在线或在CSS文件中进行

内联： 

(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode autoAppIndex banner closeBanner closeJourney creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode trackCommerceEvent".split(" "), 0);
    branch.init('some_key_defined', function(err, data) {
      
       var result = $.parseJSON(data.data);
       var Url= result.$canonical_url;
      window.location=Url;
});

Css文件： 

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

答案 16 :(得分：0)

请注意，您没有svg图像的过渡 css属性

我现在不为什么，但是如果您在Chrome上为svg图像输入：“过渡：所有缓解0.3秒”，则图像不会显示

例如：

* {
   transition: all ease 0.3s
  }

Chrome浏览器不呈现svg。

删除所有过渡CSS属性，然后重试

答案 17 :(得分：0)

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

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

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

答案 18 :(得分：0)

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

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

答案 19 :(得分：0)

Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>

答案 20 :(得分：0)

Lighttpd

我的问题是在lighttpd配置文件中缺少svg文件的哑剧处理程序。将这些添加到您的lighttpd.conf可以解决您的问题：

mimetype.assign             = (
  ".pdf"          =>      "application/pdf",
  ".sig"          =>      "application/pgp-signature",
  ".spl"          =>      "application/futuresplash",
  ".class"        =>      "application/octet-stream",
  ".ps"           =>      "application/postscript",
  ".torrent"      =>      "application/x-bittorrent",
  ".dvi"          =>      "application/x-dvi",
  ".gz"           =>      "application/x-gzip",
  ".pac"          =>      "application/x-ns-proxy-autoconfig",
  ".swf"          =>      "application/x-shockwave-flash",
  ".tar.gz"       =>      "application/x-tgz",
  ".tgz"          =>      "application/x-tgz",
  ".tar"          =>      "application/x-tar",
  ".zip"          =>      "application/zip",
  ".mp3"          =>      "audio/mpeg",
  ".m3u"          =>      "audio/x-mpegurl",
  ".wma"          =>      "audio/x-ms-wma",
  ".wax"          =>      "audio/x-ms-wax",
  ".ogg"          =>      "application/ogg",
  ".wav"          =>      "audio/x-wav",
  ".gif"          =>      "image/gif",
  ".jpg"          =>      "image/jpeg",
  ".jpeg"         =>      "image/jpeg",
  ".png"          =>      "image/png",
  ".svg"          =>      "image/svg+xml",
  ".xbm"          =>      "image/x-xbitmap",
  ".xpm"          =>      "image/x-xpixmap",
  ".xwd"          =>      "image/x-xwindowdump",
  ".css"          =>      "text/css",
  ".html"         =>      "text/html",
  ".htm"          =>      "text/html",
  ".js"           =>      "text/javascript",
  ".asc"          =>      "text/plain",
  ".c"            =>      "text/plain",
  ".cpp"          =>      "text/plain",
  ".log"          =>      "text/plain",
  ".conf"         =>      "text/plain",
  ".text"         =>      "text/plain",
  ".txt"          =>      "text/plain",
  ".spec"         =>      "text/plain",
  ".dtd"          =>      "text/xml",
  ".xml"          =>      "text/xml",
  ".mpeg"         =>      "video/mpeg",
  ".mpg"          =>      "video/mpeg",
  ".mov"          =>      "video/quicktime",
  ".qt"           =>      "video/quicktime",
  ".avi"          =>      "video/x-msvideo",
  ".asf"          =>      "video/x-ms-asf",
  ".asx"          =>      "video/x-ms-asf",
  ".wmv"          =>      "video/x-ms-wmv",
  ".bz2"          =>      "application/x-bzip",
  ".tbz"          =>      "application/x-bzip-compressed-tar",
  ".tar.bz2"      =>      "application/x-bzip-compressed-tar",
  ".odt"          =>      "application/vnd.oasis.opendocument.text", 
  ".ods"          =>      "application/vnd.oasis.opendocument.spreadsheet", 
  ".odp"          =>      "application/vnd.oasis.opendocument.presentation", 
  ".odg"          =>      "application/vnd.oasis.opendocument.graphics", 
  ".odc"          =>      "application/vnd.oasis.opendocument.chart", 
  ".odf"          =>      "application/vnd.oasis.opendocument.formula", 
  ".odi"          =>      "application/vnd.oasis.opendocument.image", 
  ".odm"          =>      "application/vnd.oasis.opendocument.text-master", 
  ".ott"          =>      "application/vnd.oasis.opendocument.text-template",
  ".ots"          =>      "application/vnd.oasis.opendocument.spreadsheet-template",
  ".otp"          =>      "application/vnd.oasis.opendocument.presentation-template",
  ".otg"          =>      "application/vnd.oasis.opendocument.graphics-template",
  ".otc"          =>      "application/vnd.oasis.opendocument.chart-template",
  ".otf"          =>      "application/vnd.oasis.opendocument.formula-template",
  ".oti"          =>      "application/vnd.oasis.opendocument.image-template",
  ".oth"          =>      "application/vnd.oasis.opendocument.text-web",

# make the default mime type application/octet-stream.
  ""              =>      "application/octet-stream",
)

参考文献

Alternative of AddType in lighthttpd

答案 21 :(得分：0)

有同样的问题。如果服务器配置正确并且.htacces不是答案，可能需要查看要嵌入的svg源。我是使用文本编辑器创建的，在html5代码中的Chrome＆amp; Safari中很好地呈现，一旦嵌入，就看不到任何内容。 为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>

答案 22 :(得分：-1)

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

style= "width:320; height:240"
相关问题
最新问题