从IE9和以上版本，你可以在普通的IMG标签中使用SVG ..

https://caniuse.com/svg-img

<img src="/static/image.svg">

您可以插入SVG间接使用<img> HTML标签，这是可能的StackOverflow如下所述:

我的电脑上有以下SVG文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0 0 350 350">

  <title>SVG 3 Circles Intersection </title>

    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

我已经把这张照片上传到https://svgur.com

上传终止后，我获得了以下URL:

https://svgshare.com/i/kyc.svg

然后我手动(不使用图像图标)添加以下html标签

<img src='https://svgshare.com/i/kyc.svg' title='Intersection of 3 Circles'/>

结果就在下面

使用数据:形象

对于有疑问的用户，可以看到我在插入SVG图像的StackOverflow上编辑以下答案所做的工作

备注-1:SVG文件必须包含<?xml?>元素。在开始时，我只是简单地创建了一个SVG文件，直接以< SVG >标记开始，但什么都不起作用!

备注-2:在开始时，我已经尝试使用编辑工具栏的image图标插入图像。我粘贴我的SVG文件的URL，但StackOverflow不接受这个方法。<img>标签需要手动添加。

我希望这个答案可以帮助其他用户。

<object>和<embed>有一个有趣的属性:它们可以从外部文档获得对SVG文档的引用(将同源策略考虑在内)。然后可以使用引用来动画SVG，更改其样式表等。

鉴于

<object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>

你可以这样做

document.getElementById("svg1").addEventListener("load", function() {
    var doc = this.getSVGDocument();
    var rect = doc.querySelector("rect"); // suppose our image contains a <rect>
    rect.setAttribute("fill", "green");
});

从IE9和以上版本，你可以在普通的IMG标签中使用SVG ..

https://caniuse.com/svg-img

<img src="/static/image.svg">

我的两分:截至2019年，93%的正在使用的浏览器(以及100%的最后两个版本的每个浏览器)可以处理<img>元素中的SVG:

来源:Can I Use

所以我们可以说没有理由再使用<object>了。

然而，它仍然有它的优点:

当检查时(例如使用Chrome Dev Tools)，你会看到整个SVG标记，以防你想要篡改它并看到实时变化。 它提供了一个非常健壮的后备实现，以防您的浏览器不支持SVG(等等，但每个浏览器都支持!)，如果找不到SVG，它也可以工作。这是XHTML2规范的一个关键特性，它类似于betamax或HD-DVD

但也有缺点:

没有AMP对应的<object>(虽然它是完全安全的使用< AMP -img>和内联使用它。 你不应该混合serviceworker获取处理程序与任何类型的嵌入，所以有一个<object>标签可能会使你的PWA从真正的离线能力。

这个jQuery函数捕获svg图像中的所有错误，并将文件扩展名替换为另一个扩展名

请打开控制台查看加载图像svg的错误

(函数(美元){ 美元(img)。(“错误”,函数(){ Var image = $(this).attr('src'); 如果(/(\.svg)$/i。测试(图像)){ (美元)。Attr ('src'， image.replace('.svg'， '.png')); ｝ }) }) (jQuery); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < img src = " https://jsfiddle.net/img/logo.svg " >