我是否对SVG文件使用<img>，<object>或<embed>？

603

我应该使用<img>，<object>或<embed>用于加载SVG文件插入到页面的方式类似于加载jpg，gif还是png？

每个代码分别是什么以确保其正常工作？（在我的研究中，我看到了关于包含模仿类型或指向后备SVG渲染器的参考，但是没有看到一个很好的最新参考）。

假设我正在用Modernizr检查SVG支持，然后退回（可能是用一个普通<img>标签进行替换）不支持SVG的浏览器。

html  svg  vector-graphics 
— 阿龙
source
3
— Machado
2
从理论上讲，您还可以<svg>从中引用其他SVG。这可以通过使用来实现<image>。
— phk

Answers:

635

我可以推荐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>。

  • 对于css background-image和类似属性中的svg ，modernizr是切换为后备图像的一种选择，另一种方法则取决于多个背景来自动执行：

    div {
    background-image: url(fallback.png);
    background-image: url(your.svg), none;
}

    注意：多背景策略在Android 2.3上不起作用，因为它支持多背景但不支持svg。

这篇关于svg后备广告的博文是另一本好书。

— 埃里克·达尔斯特罗姆
source
7
设置尺寸的正确方法是什么？是否包含高度和宽度属性，还是使用CSS？
— artlung 2010年
5
使用css很好，或者在嵌入元素上设置大小（即：iframe，embed，object，img）-后者所做的是，它可以避免在定义大小的样式表之前出现未样式化的内容已加载。还要确保svg具有viewBox属性，并从svg根元素中删除width / height属性。根据我的经验，这将为您提供最佳的跨浏览器行为。
— ErikDahlström，2010年
8
此方法将始终下载栅格文件。此答案可确保仅在旧版IE浏览器上请求回退。
— 拉里
3
请注意，以上内容不适用于Adobe SVG插件。但是，如果<param name="src" value="your.svg" />在<object>标记中添加代码，就可以使所有功能正常运行（现代浏览器+ ASV + MSIE）。我花了很长时间试图弄清楚如何做所有这些事情，我想我终于明白了。
— Christopher Schultz
5
我认为，人们停止支持古老的浏览器的速度越快，我们将拥有一个使他们的浏览器保持最新的社会，这个社会甚至会从2012年开始自动运行。唯一的借口是无法免费使用现代浏览器，但Firefox例如仍然支持Windows XP（可能是52版）。总有一种现代而免费的选择。
— Neonit
115

从IE9及更高版本开始，您可以在普通的IMG标签中使用SVG。

https://caniuse.com/svg-img

<img src="/static/image.svg">
— 克里斯蒂安·兰格伦
source
35
如果SVG需要加载其他资源，则此方法不起作用。（字体，图像等）
— TheHippo
10
对于徽标或图标，出于语义原因，我仍建议使用IMG标签，并确保SVG只是矢量图。
— Christian Landgren 2013年
4
现在无处不在。@artlung，您可能需要更改对此答案。
— SteeveDroz
15
使用该<img/>标签的任何人可能都想知道有关附加SVG碎片标识符的信息，例如“ <img src="myimage.svg#svgView(preserveAspectRatio(none))" />”，它可以使您控制宽高比viewBox等，与内联SVG定义相同。有关缩放的更多信息-css-tricks.com/scale-svg
— brichins
101

<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");
});
— WGH
source
我认为您不会从<object>元素中获得“加载”事件。不支持。
— 史蒂夫·奥康纳
5
@ SteveO'Connor我不知道，也许它没有得到很好的记录，但是它确实可以在Firefox，IE11和Chrome中运行。至少对于外部SVG文件：我无法使其与数据URI一起使用。
— WGH 2014年
很棒！有趣的是，当您有两个SVG文件时，似乎需要添加“ id”字段，否则我的歌剧浏览器中只会显示1个？
— Bram
您将获得内联和引用方法的双重优势！
— 布兰迪托18-3-29
很高兴知道，除非SVG是内联的，否则SVG 内部的超链接将不起作用。
— 心理学家
26

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

<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
— 罗伯特·索利斯
source
3
有趣。但是onerror如果svg不渲染，您可以放心吗？您测试了哪些浏览器？
— artlung 2015年
1
是的，我在移动Android操作系统（默认浏览器）上对其进行了测试：）
— 罗伯特·索利斯
24

采用 srcset

当今srcset大多数当前的浏览器都支持属性，该属性允许为不同的用户指定不同的图像。例如，您可以将其用于1x和2x像素密度，浏览器将选择正确的文件。

在这种情况下，如果您在中指定了SVG srcset，但浏览器不支持该SVG ，则会在上回退src。

<img src="logo.png" srcset="logo.svg" alt="My logo">

与其他解决方案相比，此方法具有以下优点：

  1. 它不依赖任何奇怪的黑客或脚本
  2. 这很简单
  3. 您仍然可以包含替代文字
  4. 支持的浏览器srcset应该知道如何处理它，以便它仅下载所需的文件。
— 乱涂乱画者
source
5
考虑到如今所有浏览器都支持SVG的可能性> 99％，为什么还要麻烦呢？
— 罗伯特·朗森
5
确保所有人都能正确看到页面的一部分，Google会更爱您！
— Hoots
2
鉴于目前您正在将后备图片推送给约10％的用户，因此看起来比实际情况要好。
— Volker E.
2
@VolkerE。10％？caniuse显示缺少2％左右的SVG支持。我仍然像答案中一样使用srcset来支持2％。希望将来，浏览器能够获取诸如srcset之类的信息，并根据性能和大小等因素而不仅仅是设备大小或文件格式支持等因素来选择合适的图像。
— Scribblemacher
3
此解决方案的唯一问题是，当浏览器支持SVG但不支持srcset时。例如IE11，即使它支持SVG也默认返回PNG
— Hego555 '18年
16

如果您需要SVG使用CSS完全可样式化，则必须在DOM中内联。这可以通过SVG注入来实现，该注入使用Javascript <img>在页面加载后用SVG文件的内容替换HTML元素（通常是元素）。

这是使用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的合著者

— u山
source
15

我个人会使用<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 {
  fill: red;
}

一些资源：SVG技巧

— 拉泽香蕉
source
15

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

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

Internet Explorer和Edge会正确调整SVG的大小，但是您必须同时指定高度和宽度。

您可以在svg 中将onclick，onmouseover等添加到SVG中的任何形状：onmouseover =“ top.myfunction（evt）;”

您也可以在SVG中使用网络字体，方法是将其包含在常规样式表中。

注意：如果要从Illustrator导出SVG，则网络字体名称将是错误的。您可以在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组成，但联系方式除外。

警告： Safari中Web字体的大小调整不精确-如果您有很多从纯文本到粗体或斜体的过渡，过渡点可能会有少量多余或缺失的空间。有关更多信息，请参见我对这个问题的回答。

— 安德鲁·斯威夫特
source
谢谢。仅仅花了3个小时就拉了我的头发，试图弄清楚为什么光栅图像没有显示在我的img标签中……您知道这是否在任何地方都有正式记录吗？
— ryebread 2015年
@Andrew Swift，您可以在dev.ozake.com上获得非常不错的视觉效果，但是存在严重的可访问性问题：搜索引擎可能很难索引该网站（我不确定他们是否会选择隐藏在SVG事件中的链接） ; 该网站无法通过键盘导航；似乎屏幕阅读器会cho
— 住
11

我的两分钱：截至2019年，正在使用的浏览器中有93％（以及每个浏览器的后两个版本的100％）可以处理SVG <img>元素：

在此处输入图片说明

资料来源：我可以使用

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

但是它仍然有其优点：

  • 在检查时（例如使用Chrome Dev Tools），您会看到整个SVG标记，以防您想稍作改动并查看实时更改。

  • 万一您的浏览器不支持SVG（等待，但每个浏览器都支持！），它提供了一种非常强大的后备实现。这是XHTML2规范的关键功能，例如betamax或HD-DVD

但是也有缺点：

— ffflabs
source
3

找到了一种使用纯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。

您可以在我的博客中找到更多详细信息和测试过程。

— 阿特鲁
source
0

此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">
展开摘要

— 安德烈斯·塞帕（Andres Separ）
source
-1

我建议结合使用

<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
— 病毒97
source
您能否详细说明为什么要使用这些设置以及为什么它与其他答案不同？
— kvantour
-1

您可以使用<img>HTML标记间接插入SVG，并且可以在StackOverflow上执行以下操作：

我的PC上有以下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/H7d.svg

然后，我在html标记后手动添加了（不使用IMAGE图标）

<img src="https://svgshare.com/i/Kyp.svg"/>

结果就在下面

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

备注1：SVG文件必须包含<?xml?>元素。开始时，我只是简单地创建了一个SVG文件，该文件直接以<svg>标记开头，没有任何效果！

备注2：一开始，我尝试使用的IMAGE图标插入图像Edit Toolbar。我粘贴了SVG文件的URL，但是StackOverflow不接受此方法。该<img>标签必须手动添加。

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

— 施莱贝
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.