我应该使用<img>, <object>,或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么,以确保它工作得尽可能好?(在我的研究中,我看到了包括mimetype或指向备用SVG渲染器的参考,但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持,并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。
我应该使用<img>, <object>,或<embed>加载SVG文件到页面的方式类似于加载jpg, gif或png?
每一个代码是什么,以确保它工作得尽可能好?(在我的研究中,我看到了包括mimetype或指向备用SVG渲染器的参考,但没有看到一个良好的艺术状态参考)。
假设我正在使用Modernizr检查SVG支持,并退回到不支持SVG的浏览器(可能使用普通的<img>标记进行替换)。
当前回答
在大多数情况下,我建议使用<object>标记来显示SVG图像。这感觉有点不自然,但如果你想提供动态效果,这是最可靠的方法。
对于没有交互的图像,可以使用<img>标记或CSS背景。
内联svg或iframe是一些项目的可能选项,但最好避免<embed>
但如果你想玩SVG之类的东西
改变颜色 调整路径 旋转svg
选择嵌入的那个
<svg>
<g>
<path> </path>
</g>
</svg>
其他回答
这个jQuery函数捕获svg图像中的所有错误,并将文件扩展名替换为另一个扩展名
请打开控制台查看加载图像svg的错误
(函数(美元){ 美元(img)。(“错误”,函数(){ Var image = $(this).attr('src'); 如果(/(\.svg)$/i。测试(图像)){ (美元)。Attr ('src', image.replace('.svg', '.png')); } }) }) (jQuery); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> < img src = " https://jsfiddle.net/img/logo.svg " >
我可以推荐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后退的博文。
我的两分:截至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是完全可样式的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的合著者
找到了一个纯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。
更多的细节和测试过程可以在我的博客中找到。