我应该使用<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>标记进行替换)。
当前回答
从IE9和以上版本,你可以在普通的IMG标签中使用SVG ..
https://caniuse.com/svg-img
<img src="/static/image.svg">
其他回答
在大多数情况下,我建议使用<object>标记来显示SVG图像。这感觉有点不自然,但如果你想提供动态效果,这是最可靠的方法。
对于没有交互的图像,可以使用<img>标记或CSS背景。
内联svg或iframe是一些项目的可能选项,但最好避免<embed>
但如果你想玩SVG之类的东西
改变颜色 调整路径 旋转svg
选择嵌入的那个
<svg>
<g>
<path> </path>
</g>
</svg>
我建议使用的组合
<svg viewBox="" width="" height="">
<path fill="#xxxxxx" d="M203.3,71.6c-.........."></path>
</svg>
最好的选择是在不同的设备上使用SVG图像:)
<img src="your-svg-image.svg" alt="Your Logo Alt" onerror="this.src='your-alternative-image.png'">
从IE9和以上版本,你可以在普通的IMG标签中使用SVG ..
https://caniuse.com/svg-img
<img src="/static/image.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 " >