我应该使用<img>， <object>，或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么，以确保它工作得尽可能好?(在我的研究中，我看到了包括mimetype或指向备用SVG渲染器的参考，但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持，并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。
当前回答
我可以推荐SVG Primer(由W3C发布)，它涵盖了这个主题:http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML
如果你使用<object>，那么你可以免费得到光栅回退*:
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
*)好吧，不是完全免费的，因为有些浏览器下载这两种资源，看看Larry下面的建议如何解决这个问题。
2014年更新:
If you want a non-interactive svg, use <img> with script fallbacks to png version (for older IE and android < 3). One clean and simple way to do that: <img src="your.svg" onerror="this.src='your.png'">. This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play. If you want an interactive svg, use either <iframe> or <object>. If you need to provide older browsers the ability to use an svg plugin, then use <embed>. For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically: div { background-image: url(fallback.png); background-image: url(your.svg), none; } Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.
另外一个不错的阅读是这篇关于svg后退的博文。
其他回答
在大多数情况下，我建议使用<object>标记来显示SVG图像。这感觉有点不自然，但如果你想提供动态效果，这是最可靠的方法。
对于没有交互的图像，可以使用<img>标记或CSS背景。
内联svg或iframe是一些项目的可能选项，但最好避免<embed>
但如果你想玩SVG之类的东西
改变颜色 调整路径 旋转svg
选择嵌入的那个
<svg>
<g>
<path> </path>
</g>
</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中无法精确地调整大小——如果你有大量从纯文本到粗体或斜体的过渡，在过渡点可能会有少量额外的空间或缺失的空间。更多信息请看我的回答。
使用srcset
目前大多数浏览器都支持srcset属性，它允许为不同的用户指定不同的图像。例如，您可以使用它的1x和2x像素密度，浏览器将选择正确的文件。
在这种情况下，如果您在srcset中指定了SVG，而浏览器不支持它，它将退回到src。
<img src="logo.png" srcset="logo.svg" alt="My logo">
与其他解决方案相比，这种方法有几个优点:
它不依赖于任何奇怪的黑客或脚本 它很简单 您仍然可以包含alt文本 支持srcset的浏览器应该知道如何处理它，以便它只下载所需的文件。
您可以插入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>标签需要手动添加。
我希望这个答案可以帮助其他用户。
找到了一个纯CSS解决方案，没有双重图像下载。它没有我想要的那么漂亮，但很好用。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG demo</title>
<style type="text/css">
.nicolas_cage {
background: url('nicolas_cage.jpg');
width: 20px;
height: 15px;
}
.fallback {
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<style>
<![CDATA[
.fallback { background: none; background-image: none; display: none; }
]]>
</style>
</svg>
<!-- inline svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
<switch>
<circle cx="20" cy="20" r="18" stroke="grey" stroke-width="2" fill="#99FF66" />
<foreignObject>
<div class="nicolas_cage fallback"></div>
</foreignObject>
</switch>
</svg>
<hr/>
<!-- external svg -->
<object type="image/svg+xml" data="circle_orange.svg">
<div class="nicolas_cage fallback"></div>
</object>
</body>
</html>
其思想是插入具有回退样式的特殊SVG。
更多的细节和测试过程可以在我的博客中找到。
