我应该使用<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>标记进行替换)。
当前回答
使用<svg>标记更容易,因为您的代码将运行得更快,并且您直接使用svg。要获得只有svg标记,复制svg文件不带xml标记。结果会是这样的:
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="64px" height="64px"><path d="M 4.5 2 C 3.675781 2 3 2.675781 3 3.5 L 3 14.484375 L 8 10.820313 L 13 14.484375 L 13 3.5 C 13 2.675781 12.324219 2 11.5 2 Z M 4.5 3 L 11.5 3 C 11.78125 3 12 3.21875 12 3.5 L 12 12.515625 L 8 9.578125 L 4 12.515625 L 4 3.5 C 4 3.21875 4.21875 3 4.5 3 Z"/></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从真正的离线能力。
这个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 " >
尽管w3schools不推荐<embed>标签,它是唯一让我的svg混合模式和蒙版在Chrome中工作的东西:
<embed src="logo.svg" style="width:100%; height:180px" type="image/svg+xml" />
而Firefox则很好
<svg style="width:100%">
<use xlink:href="logo.svg#logo"></use>
</svg>
Chrome did not render the gradient: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="146" version="1.1"> <title>digicraft punchcard logo</title> <defs> <linearGradient id="punchcard-gradient" x1="100%" y1="50%" x2="0%" y2="50%"> <stop offset="0%" style="stop-color:rgb(128,128,128);stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(69,69,69);stop-opacity:1" /> </linearGradient> <pattern id="punchcard-pattern-v" x="0" y="0" width="21" height="21" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="20" height="20" fill="skyblue" onClick="mClick(this)" /> </pattern> <pattern id="punchcard-pattern-h" x="0" y="0" width="21" height="145" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="21" height="20" fill="skyblue" /> <rect x="0" y="20" width="20" height="84" fill="url(#punchcard-pattern-v)" /> <rect x="0" y="105" width="20" height="20" fill="skyblue" /> <rect x="0" y="126" width="21" height="20" fill="skyblue" /> </pattern> <mask id="punchcard-mask" width="10" height="100%"> <rect width="100%" height="146" fill="url(#punchcard-pattern-h)" /> </mask> </defs> <rect x="0" y="0" width="100%" height="159" fill="url(#punchcard-gradient)" mask="url(#punchcard-mask)" /> </svg>
两个浏览器中的<object>和<img>也是如此。
根据个人经验,我建议在image tag中通过src加载svg文件,如果一个页面上有很多svg图标或动态追加,会变慢,性能变差
<img src="./file.svg"/> is better performance than
<div><svg>.....</svg></div>
但是如果你想在hover中指定CSS样式,你必须使用embed
如果你需要你的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的合著者