<img>，<object>或<embed>将SVG文件加载到页面中的方式类似于将jpg，gif或png加载到页面中吗？可能？ （我在研究中看到包含模仿类型或指向后备SVG渲染器的引用，但没有看到良好的技术参考。）假设我正在使用Modernizr检查SVG支持并在不支持SVG的浏览器返回（可能用普通的
<img>标签代替）。#1 楼
我可以推荐SVG入门手册（由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更新：
如果您要使用非交互式svg，请使用带有脚本后备功能的
<img> 转换为png版本（适用于较旧的IE和android <3）。一种干净而简单的方法
：
<img src="your.svg" onerror="this.src='your.png'">。 这将非常类似于GIF图像，并且如果您的浏览器支持声明性动画（SMIL），则这些动画将播放。
如果要使用交互式svg，请使用
<iframe>或<object>。 如果您需要为较旧的浏览器提供使用svg插件的功能，请使用
<embed>。另一个取决于自动执行以下操作：div {
background-image: url(fallback.png);
background-image: url(your.svg), none;
}
注意：多背景策略在Android 2.3上不起作用，因为它支持多个背景但不支持svg。
这篇关于svg后备广告的博文也很不错。
评论
设置尺寸的正确方法是什么？是否包含height和width属性，还是使用CSS？
– artlung
2010-12-20 12:26
使用css很好，或者在嵌入元素（即iframe，embed，object，img中的任一个）上设置大小-后者所做的是，它可以避免在定义大小的样式表之前出现未样式化的内容已加载。还要确保svg具有viewBox属性，并从svg根元素中删除width / height属性。根据我的经验，这将为您提供最佳的跨浏览器行为。
– ErikDahlström
2010-12-21 11:57
此方法将始终下载栅格文件。此答案可确保仅在旧版IE浏览器上请求回退。
–拉里
2012年10月12日12:22
请注意，以上内容不适用于Adobe SVG插件。但是，如果在
#2 楼
在IE9及更高版本中，您可以在普通的IMG标签中使用SVG。.https://caniuse.com/svg-img
<img src="/static/image.svg">
评论
如果SVG需要加载其他资源，则此方法不起作用。 （字体，图像等）
–The河马
13-10-18在14:27
对于徽标或图标，出于语义原因，我仍然建议使用IMG标签，并确保SVG只是矢量图。
–克里斯蒂安·兰德格伦（Christian Landgren）
13-10-18在15:36
现在无处不在。 @artlung，您可能想更改对此答案。
–SteeveDroz
2015年10月1日，11：18
使用
–白蛋白
16 Jun 16'在17:04
#3 楼
<object>和<embed>具有一个有趣的属性：它们使从外部文档中获得SVG文档的引用成为可能（考虑了同源策略）。然后，可以使用该参考为SVG设置动画，更改其样式表等。 br /> <object id="svg1" data="/static/image.svg" type="image/svg+xml"></object>
评论
我认为您不会从
#4 楼
最好的选择是在不同设备上使用SVG图像：)<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
评论
有趣。但是，如果svg不呈现，您是否可以确保onerror触发？您测试了哪些浏览器？
– artlung
2015年11月9日在18:41
是的，我在移动Android操作系统（默认浏览器）上对其进行了测试：)
– RoberthSolís
15年11月28日在9:11
#5 楼
使用srcset 当前大多数当前的浏览器都支持
srcset属性，该属性允许为不同的用户指定不同的图像。例如，可以将其用于1x和2x像素密度，浏览器将选择正确的文件。在这种情况下，如果在srcset中指定了SVG，并且浏览器不支持它会退回到src上。依靠任何奇怪的黑客或脚本很简单
您仍然可以包含替代文本
支持
srcset的浏览器应该知道如何处理它，以便仅下载所需的文件。评论
考虑到如今任何浏览器都支持SVG的可能性> 99％，为什么还要麻烦呢？
–罗伯特·朗森（Robert Longson）
17 Mar 24 '17 at 20:41
确保所有人都能正确看到页面的一部分，Google会更爱您！
–热点
17年9月29日在8:46
鉴于目前您正将后备图片推送给约10％的用户，因此看起来比实际情况要好。
– Volker E.
18 Mar 16 '18 3:16
@VolkerE。 10％？ caniuse显示缺少2％的SVG支持。我仍然像在答案中那样使用srcset来支持2％。希望将来，浏览器能够获取诸如srcset之类的信息，并根据性能和大小等因素而不仅仅是设备大小或文件格式支持等因素来选择合适的图像。
– Scribblemacher
18 Mar 16 '18在11:45
此解决方案的唯一问题是，当浏览器支持SVG但不支持srcset时。例如IE11，即使它支持SVG也默认返回PNG
–Hego555
18年7月24日在4:39
#6 楼
如果您需要SVG使用CSS完全可样式化，则必须在DOM中内联。这可以通过SVG注入来实现，该注入使用Javascript在页面加载后用SVG文件的内容替换HTML元素（通常是<img>元素）。下面是使用SVGInject的一个最小示例。 ：<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
加载图像后，
onload="SVGInject(this)将触发注入，并且<img>元素将被src属性中提供的文件内容替换。这适用于所有支持SVG的浏览器。免责声明：我是SVGInject
的合著者
评论
我仍然没有使用svg注入的优势。你能详细说明吗？
–阿里·默特·卡卡尔（Ali Mert Cakar）
8月29日18:03
您可以在单独的文件中包含SVG，但仍可以使用CSS和/或Javascript访问它们。在某些情况下，您可以使用webpack以便将SVG插入文件中，但是如果您动态访问SVG，则SVG注入基本上是实现此目的的唯一方法。
–和歌山
8月29日19:24
非常感谢@Waruyama
–阿里·默特·卡卡尔（Ali Mert Cakar）
8月30日17:30
#7 楼
我个人会使用<svg>标签，因为如果您完全控制它，就可以使用。如果确实在<img>中使用它，则无法通过CSS等控制SVG的内部。另一件事是浏览器支持。
只需打开
svg文件并将其直接粘贴到模板中。<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3400 2700" preserveAspectRatio="xMidYMid meet" (click)="goHome();">
<g id="layer101">
<path d="M1410 2283 c-162 -225 -328 -455 -370 -513 -422 -579 -473 -654 -486 -715 -7 -33 -50 -247 -94 -475 -44 -228 -88 -448 -96 -488 -9 -40 -14 -75 -11 -78 2 -3 87 85 188 196 165 180 189 202 231 215 25 7 129 34 230 60 100 26 184 48 185 49 4 4 43 197 43 212 0 10 -7 13 -22 9 -13 -3 -106 -25 -208 -49 -102 -25 -201 -47 -221 -51 l-37 -7 8 42 c4 23 12 45 16 49 5 4 114 32 243 62 129 30 240 59 246 66 10 10 30 132 22 139 -1 2 -110 -24 -241 -57 -131 -33 -240 -58 -242 -56 -6 6 13 98 22 107 5 4 135 40 289 80 239 61 284 75 307 98 14 15 83 90 153 167 70 77 132 140 139 140 7 0 70 -63 141 -140 70 -77 137 -150 150 -163 17 -19 81 -39 310 -97 159 -41 292 -78 296 -82 8 -9 29 -106 24 -111 -1 -2 -112 24 -245 58 -134 33 -245 58 -248 56 -6 -7 16 -128 25 -136 5 -4 112 -30 238 -59 127 -29 237 -54 246 -57 11 -3 20 -23 27 -57 6 -28 9 -53 8 -54 -1 -1 -38 7 -81 17 -274 66 -379 90 -395 90 -16 0 -16 -6 3 -102 11 -57 21 -104 22 -106 1 -1 96 -27 211 -57 115 -31 220 -60 234 -66 14 -6 104 -101 200 -211 95 -111 175 -197 177 -192 1 5 -40 249 -91 542 l-94 532 -145 203 c-220 309 -446 627 -732 1030 -143 201 -265 366 -271 367 -6 0 -143 -183 -304 -407z m10 -819 l-91 -161 -209 -52 c-115 -29 -214 -51 -219 -49 -6 1 32 55 84 118 l95 115 213 101 c116 55 213 98 215 94 1 -3 -38 -78 -88 -166z m691 77 l214 -99 102 -123 c56 -68 100 -125 99 -127 -4 -3 -435 106 -447 114 -4 2 -37 59 -74 126 -38 68 -79 142 -93 166 -13 23 -22 42 -20 42 2 0 101 -44 219 -99z"/>
<path d="M1126 2474 c-198 -79 -361 -146 -363 -147 -2 -3 -70 -410 -133 -805 -12 -73 -20 -137 -18 -143 2 -6 26 23 54 63 27 40 224 320 437 622 213 302 386 550 385 551 -2 2 -165 -62 -362 -141z"/>
<path d="M1982 2549 c25 -35 159 -230 298 -434 139 -203 283 -413 319 -465 37 -52 93 -134 125 -182 59 -87 83 -109 73 -65 -5 20 -50 263 -138 747 -17 91 -36 170 -42 176 -9 8 -571 246 -661 280 -14 6 -7 -10 26 -57z"/>
<path d="M1679 1291 c-8 -11 -71 -80 -141 -153 l-127 -134 -95 -439 c-52 -242 -92 -442 -90 -445 6 -5 38 28 218 223 l99 107 154 0 c85 0 163 -4 173 -10 10 -5 78 -79 151 -162 73 -84 136 -157 140 -162 18 -21 18 4 -2 85 -11 46 -58 248 -105 448 l-84 364 -87 96 c-108 121 -183 201 -187 201 -2 0 -10 -9 -17 -19z m96 -488 c33 -102 59 -189 57 -192 -2 -6 -244 -2 -251 4 -5 6 120 375 127 375 4 0 34 -84 67 -187z"/>
</g>
</svg>
然后在您的CSS中，您可以简单地例如： >某些资源：SVG提示
#8 楼
如果使用对于任何种类的高级SVG使用，包括SVG内联产品，到目前为止，其灵活性最高。
Internet Explorer和Edge可以正确调整SVG的大小，但是必须同时指定高度和宽度。
您可以在svg中将onclick，onmouseover等添加到任意形状SVG：onmouseover =“ top.myfunction（evt）;”
还可以通过将Web字体包含在常规样式表中来在SVG中使用网络字体。
注意：如果要从Illustrator导出SVG，则网络字体名称将错误。您可以在CSS中更正此问题，避免在SVG中弄乱。例如，Illustrator给Arial输入了错误的名称，您可以像这样来解决它：
有关示例，请访问ozake.com。整个网站都是由SVG组成，但联系方式除外。
警告：Safari中Web字体的大小调整不精确-如果从纯文本到粗体或斜体的转换很多，可能会有过渡点处有少量多余或缺少的空间。有关更多信息，请参见我对这个问题的回答。
评论
谢谢。仅仅花了3个小时就拉了我的头发，试图弄清楚为什么栅格图像没有显示在我的img标签中。
–黑面包
15年11月24日在23:43
@Andrew Swift，在dev.ozake.com上可以得到非常不错的视觉效果，但是存在严重的可访问性问题：搜索引擎可能很难索引该网站（我不确定它们是否会选择隐藏在SVG事件中的链接） ;该网站无法通过键盘导航；似乎屏幕阅读器会窒息...
– interDist
16年1月24日在15:25
#9 楼
我的两分钱：截至2019年，正在使用的浏览器中有93％（以及每个浏览器的最后两个版本的100％）可以处理<img>元素中的SVG：
资料来源：我可以使用
，所以我们可以说没有理由再使用
<object>。 但是它仍然有其优点：
检查时（例如，使用Chrome Dev Tools），您会看到整个SVG标记，以防万一您想篡改一点点，看看现场的变化。
如果您的浏览器不支持SVG（请稍等，但每个浏览器都支持），它提供了一种非常强大的后备实现方式；如果找不到SVG，它也可以使用。这是XHTML2规范的一项关键功能，例如betamax或HD-DVD
，但是也有缺点：
没有AMP对应到
<object>（因此与<amp-img>一起使用也是非常安全的，并且也可以内联使用。真正具有脱机能力。#10 楼
找到了一种使用纯CSS且没有双图像下载的解决方案。它不是我想要的美丽，但是可以工作。和测试过程可以在我的博客中找到。#11 楼
在大多数情况下，我建议使用<object>标签显示SVG图像。感觉有点不自然，但是如果要提供动态效果，这是最可靠的方法。对于没有交互作用的图像，可以使用
<img>标记或CSS背景。可以使用嵌入式SVG或iframe一些项目的选项，但最好避免
<embed> ，但是如果您想使用SVG之类的东西，如
更改颜色
调整大小路径
旋转svg
与嵌入式一体机一起使用
<svg>
<g>
<path> </path>
</g>
</svg>
#12 楼
此jQuery函数捕获svg图像中的所有错误，并将文件扩展名替换为备用扩展名请打开控制台以查看加载svg图像时的错误
(function($){
$('img').on('error', function(){
var image = $(this).attr('src');
if ( /(\.svg)$/i.test( image )) {
$(this).attr('src', image.replace('.svg', '.png'));
}
})
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://jsfiddle.net/img/logo.svg">
#13 楼
您可以使用<img> HTML标签间接插入SVG，并且可以在StackOverflow上执行以下操作： ：//svgur.com 上传结束后，我获得了以下URL： br />，结果恰好在下面
对于有疑问的用户，有可能看到我在编辑关于StackOverflow插入SVG图像的回答后所做的工作
REMARK-1：SVG文件必须包含
<?xml?>元素。开始时，我只是创建了一个直接以<svg>标记开头的SVG文件，没有任何效果！REMARK-2：开始时，我尝试使用
IMAGE图标的Edit Toolbar图标插入图像。我粘贴了SVG文件的URL，但是StackOverflow不接受此方法。必须手动添加<img>标签。希望这个答案可以对其他用户有所帮助。
#14 楼
我建议结合使用<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
评论
您能否详细说明为什么要使用这些设置以及为什么与其他答案不同？
– kvantour
19年8月27日在8:35
#15 楼
一个对我有用的简单替代方法是将svg代码插入div。这个简单的示例使用javascript来操作div innerHTML。 svg = '<svg height=150>';
svg+= '<rect height=100% fill=green /><circle cx=150 cy=75 r=60 fill=yellow />';
svg+= '<text x=150 y=95 font-size=60 text-anchor=middle fill=red>IIIIIII</text></svg>';
document.all.d1.innerHTML=svg;
<div id='d1' style="float:right;"></div><hr>
评论
只需看看github.com/jonathantneal/svg4everybody从理论上讲，您还可以有一个