Chrome 不渲染通过 <img> 元素引用的 SVG

Posted 2023-03-28

技术标签:

【中文标题】Chrome 不渲染通过 <img> 元素引用的 SVG【英文标题】：Chrome not rendering SVG referenced via <img> element 【发布时间】：2012-05-31 00:25:54 【问题描述】：

我遇到了 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;
        

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

【问题讨论】：

你能在这里举个例子或发布一些示例代码吗？如果您需要帮助，我们确实需要能够自己查看和重现此内容。您的“Aged-Brass.svg”是否包含嵌入图像？我有同样的问题，这就是我追查到的...... Chrome 浏览器不会显示 svg 图片，如果它在 svg 源代码中没有 with 属性值。编辑您的 SVG 源代码并添加具有所需值的宽度属性。 【参考方案1】：

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

它对我有用！

【讨论】：

这是一个可行的解决方案。我在使用 photoshop 将智能矢量对象导出为 SVG 时遇到了这个问题。这是一个救命稻草，花了几个小时试图找出问题所在。谢谢！！同样，这解决了我的问题，也花了很多时间试图弄清楚为什么图像没有出现。我在 SVG 文件中没有这行代码，将它添加到这应该是最重要的。你拯救了我的一天。【参考方案2】：

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

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

【讨论】：

这个。而且我必须将其加载为 div 的背景图像。 svg 仍然需要命名空间。只需确保它在您用作背景的 SVG 文件中进行了定义。【参考方案3】：

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

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

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

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

【讨论】：

有人知道是否有办法在 Photoshop 中使用智能对象来做到这一点？在多次尝试其他修复后，打开 illustrator 并在 illustrator 中使用此选项重新导出是唯一能让我在 chrome 中显示 svg 的方法。该选项对实际的 SVG 代码有什么影响？引用@JānisElmeris 的评论 - 这必须对 SVG 代码本身产生一些影响，它才能突然工作。这会增大 SVG 的大小【参考方案4】：

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

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

【讨论】：

谢谢。将 Content-Type 设置为 image/svg+xml 修复了它。注意image/svg提供下载文件，它必须有+xml。在我的例子中，我将 SVG 上传到 Amazon S3。将内容类型设置为 image/svg+xml 为我修复了它。感谢您让我走上正轨！【参考方案5】：

我遇到了类似的问题，现有的答案要么不适用，要么有效，但由于其他原因我们无法使用它们。所以我必须弄清楚 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>

【讨论】：

就是这个！ [四轮投票] 救命稻草。知道这是为什么吗？ @kevindeleon 我从来不知道为什么，但我只是做了一些搜索，发现这个 SO 答案似乎深入人心：***.com/a/69805130/1042398【参考方案6】：

改用<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"  >
          Your browser does not support SVG.
        </object>
    </div>
    <div class="BackgroundImage"></div>
</body>
</html>

【讨论】：

【参考方案7】：

将宽度属性添加到 [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"  xmlns="http://www.w3.org/2000/svg">
...  
</svg>

【讨论】：

【参考方案8】：

我从figma 导出图像时遇到了这个问题。检查 svg 的源代码，如果您的 id 中有冒号 :，如下所示：id="paint1_linear_23:318" 它会让您在 chrome 中呈现问题。

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

不要忘记像这样引用这个ID：fill="url(#paint1_linear_23:318)"。

【讨论】：

太棒了！它对我有用！谢谢！也为我工作！非常感谢！ life saver.. svg 中的冒号，导致 chrome 无法渲染 svgs..【参考方案9】：

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

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

【讨论】：

【参考方案10】：

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

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

【讨论】：

你在哪里设置这个？【参考方案11】：

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

 <svg   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- stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>

【讨论】：

【参考方案12】：

看起来像一个 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>

【讨论】：

【参考方案13】：

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

您可以在内联或 css 文件中执行：

在线：

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

Css 文件：

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

.image 
    width: 100px;
    height: 50px;

【讨论】：

【参考方案14】：

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

【讨论】：

实际的 SVG 代码发生了什么变化？我既没有使用 Photoshop 也没有使用 Illustrator，我需要修复现有的 SVG 文件。在这种情况下尝试@Sharif 回答！【参考方案15】：

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

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

让它在 chrome 上显示。

【讨论】：

【参考方案16】：

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

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

pageName 是我请求内容的局部变量。

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

【讨论】：

【参考方案17】：

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

【讨论】：

【参考方案18】：

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

【讨论】：

【参考方案19】：

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

即

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

【讨论】：

【参考方案20】：

我也遇到了与 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"
       viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke->
  ......
  ......
  .......
  </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"
       viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke->
  ......
  ......
  .......
  </g>
</svg>

【讨论】：

这两个代码sn-ps有什么区别？我没看到。 @rgilligan 我的错，第一个应该没有 doctype【参考方案21】：

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

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

例如：

* 
   transition: all ease 0.3s

Chrome 不呈现 svg。

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

【讨论】：

【参考方案22】：

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

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

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

【讨论】：

【参考方案23】：

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

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

【讨论】：

【参考方案24】：

我确保添加了图片样式。它对我有用

style= "width:320; height:240"

【讨论】：

【参考方案25】：

Lighttpd

我的问题是在 lighttpd 配置文件中缺少 svg 文件的 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",
)

参考文献

Alternative of AddType in lighthttpd

【讨论】：

【参考方案26】：

在我的情况下，由于图像标签的 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">

【讨论】：

以上是关于Chrome 不渲染通过 <img> 元素引用的 SVG的主要内容，如果未能解决你的问题，请参考以下文章

在 Firefox 或 chrome 中获取 <img> 二进制文件而不发出新请求 [重复]

用于渲染图像的 Grails Resources 插件、模块和 <r:img>？

在 <img> 中加载 SVG 时，Chrome 会发出警告

Chrome 在生产中不显示 WEBP 图像

使用 php 渲染图像并使用 html <img> 标签输出

vue 之img的src是动态渲染时(即 :src=' ' )不显示踩坑