我是否使用<img>， <object>，或<embed>用于SVG文件?

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

每一个代码是什么，以确保它工作得尽可能好?(在我的研究中，我看到了包括mimetype或指向备用SVG渲染器的参考，但没有看到一个良好的艺术状态参考)。

假设我正在使用Modernizr检查SVG支持，并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。

当前回答

根据个人经验，我建议在image tag中通过src加载svg文件，如果一个页面上有很多svg图标或动态追加，会变慢，性能变差

<img src="./file.svg"/> is better performance than 

<div><svg>.....</svg></div>

但是如果你想在hover中指定CSS样式，你必须使用embed

2021-06-30 07:18:28

其他回答

我可以推荐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后退的博文。

2010-12-19 12:38:47

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

2019-03-12 13:23:20

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

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

2020-01-06 07:39:24

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

https://caniuse.com/svg-img

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

2013-08-14 23:29:18

如果你需要你的svg是完全可样式的CSS，他们必须内联在DOM中。这可以通过SVG注入来实现，它在页面加载后使用Javascript将HTML元素(通常是<img>元素)替换为SVG文件的内容。

下面是一个使用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的合著者

2018-09-03 15:18:34

我是否使用<img>， <object>，或<embed>用于SVG文件?

推荐文章

最新文章

标签