使用<svg>标记更容易，因为您的代码将运行得更快，并且您直接使用svg。要获得只有svg标记，复制svg文件不带xml标记。结果会是这样的:

<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 16" width="64px" height="64px"><path d="M 4.5 2 C 3.675781 2 3 2.675781 3 3.5 L 3 14.484375 L 8 10.820313 L 13 14.484375 L 13 3.5 C 13 2.675781 12.324219 2 11.5 2 Z M 4.5 3 L 11.5 3 C 11.78125 3 12 3.21875 12 3.5 L 12 12.515625 L 8 9.578125 L 4 12.515625 L 4 3.5 C 4 3.21875 4.21875 3 4.5 3 Z"/></svg>

最好的选择是在不同的设备上使用SVG图像:)

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">

我建议使用的组合

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>

如果你使用<img>标记，那么基于webkit的浏览器将不会显示嵌入的位图图像。

对于任何一种高级SVG使用，包括SVG内联提供了迄今为止最大的灵活性。

Internet Explorer和Edge将正确地调整SVG的大小，但您必须指定高度和宽度。

你可以在svg中添加onclick, onmouseover等，到svg中的任何形状:onmouseover="top.myfunction(evt);"

你也可以在SVG中使用web字体，将它们包含在你的常规样式表中。

注意:如果您从Illustrator导出SVG, web字体名称将是错误的。您可以在CSS中纠正这一点，并避免在SVG中搞砸。例如，Illustrator给了Arial错误的名称，你可以这样修复它:

@font-face {    
    font-family: 'ArialMT';    
    src:    
        local('Arial'),    
        local('Arial MT'),    
        local('Arial Regular');    
    font-weight: normal;    
    font-style: normal;    
}

所有这些都适用于2013年以来发布的任何浏览器。

例如，请参见ozake.com。除了联系表单，整个站点都是由SVG组成的。

警告:Web字体在Safari中无法精确地调整大小——如果你有大量从纯文本到粗体或斜体的过渡，在过渡点可能会有少量额外的空间或缺失的空间。更多信息请看我的回答。

我的两分:截至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从真正的离线能力。

您可以插入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>标签需要手动添加。

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