124

我遇到了谷歌浏览器没有用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;
        }

        #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 文件将呈现在原始选项卡中。

4

26 回答 26

173

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

它对我有用！

于 2018-09-07T15:58:33.653 回答
57

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

<svg xmlns="http://www.w3.org/2000/svg"></svg>
于 2017-09-15T11:38:29.520 回答
30

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

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

我在 adobe 网站上阅读了它，该网站有一些其他有用的导出技巧 http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

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

于 2014-11-11T10:52:15.723 回答
28

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

AddType image/svg+xml svg svgz
AddEncoding gzip svgz
于 2015-06-19T21:08:34.130 回答
13

我有一个类似的问题，现有的答案要么不适用，要么有效，但由于其他原因我们无法使用它们。所以我必须弄清楚 Chrome 不喜欢我们的 SVG 的地方。

在我们的例子中，结果是SVG 文件中标签的id属性中有一个，Chrome 不喜欢它。当我删除它时，它工作正常。symbol::

坏的：

<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>
于 2018-03-15T17:14:48.853 回答
12

Use <object> instead (of course, replace each URL with your own):

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

于 2017-02-08T23:42:25.013 回答
10

当我从figma. 检查 svg 的源代码，如果您:在 id 中有这样的冒号：id="paint1_linear_23:318"它会让您在 chrome 中呈现问题。

只需删除 ids 中的所有冒号。

不要忘记像这样引用这个 id 来做同样的事情：fill="url(#paint1_linear_23:318)"。

于 2021-11-02T09:09:22.973 回答
10

将宽度属性添加到 [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>
于 2018-03-14T04:17:37.100 回答
6 
Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>
于 2020-09-10T11:07:10.097 回答
5

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

response.setHeader("Content-Type", "image/svg+xml");
于 2021-03-19T11:35:04.437 回答
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>
于 2012-09-25T22:26:41.107 回答
3

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

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

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>

于 2017-10-28T13:33:12.253 回答
3

.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;
}
于 2018-06-25T10:09:07.817 回答
2

就我而言，当我使用 Photoshop 创建和保存 svg 时，这个问题仍然存在。有什么帮助，是使用 Illustrator 打开文件，然后导出 svg。

于 2018-08-27T11:49:37.860 回答
1

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

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

pageName 是我请求的局部变量。

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

于 2020-03-09T11:14:53.510 回答
1

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

于 2020-11-23T02:26:30.200 回答
1

我最初从 Photoshop CC 导出了我的 svg，并且必须手动添加

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

让它在 chrome 上显示。

于 2018-07-20T21:40:09.833 回答
1

我尝试了上面的大多数解决方案，但对我没有用。我使用了一个 svg sanitizr https://svg.enshrined.co.uk/，它有效。

于 2021-11-19T06:29:51.070 回答
0

在我的情况下，由于图像标签的 id 包含_（下划线），它没有加载 svg，所以我从

<image id="image0_1166:0000"> to <image id="image0"> and it worked. And don't forget to remove the same here 
<use xlink:href="#image0">
于 2021-10-19T07:02:26.003 回答
0

我确保我添加了 Image 的 Style。它对我有用

style= "width:320; height:240"

于 2018-11-22T21:46:41.817 回答
0

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

我现在不知道为什么，但是如果您为 Chrome 上的 svg 图像制作：“transition: all ease 0.3s”，则图像不会出现

例如：

* {
   transition: all ease 0.3s
  }

Chrome 不呈现 svg。

删除任何过渡 css 属性并重试

于 2019-04-12T20:23:52.517 回答
0

我对通过 IMG 标签包含的 SVG 图像有同样的问题。对我来说，Chrome 不喜欢直接在文件顶部有一个空行。

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

于 2019-10-28T20:00:54.603 回答
0

有同样的问题。如果服务器配置正确并且 .htacces 不是答案，可能需要查看您正在嵌入的 svg 源。我的是用文本编辑器创建的，在 html5 代码中的 Chrome 和 Safari 上渲染得很好，一旦嵌入，什么都看不到。在 svg 代码中添加了正确的版本、尺寸等，并且像魅力一样工作。此外，所有样式都内联。

IE

<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>
于 2017-09-12T18:56:56.837 回答
0

轻量级

我的问题是缺少svglighttpd 配置文件中文件的 mime 处理程序。将这些添加到您的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",
)

参考

lighthttpd 中 AddType 的替代方案

于 2020-11-29T18:20:59.830 回答
0

我也遇到了与 chrome 相同的问题，添加后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>
于 2018-01-22T13:12:32.457 回答
0

在出现问题时，请先尝试使用能够读取 svg-images 的程序打开图像。
如果失败，则 svg-image 以某种方式损坏。

我遇到了这种情况，并将 svg-paths 复制到了一个新的 svg-image 中，并调整了 svg-tags 的所有细节。

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

于 2019-06-03T06:28:25.190 回答