html中引入SVG格式图片方式总结

诸位大佬,可否扫下右下方参与下“支付宝”红包活动!小弟万分感谢!

网页开发中SVG格式的外部图片相对于png/jpg格式的使用并不算少,那么既然用到了SVG我们在html页面中如何引入svg格式的图片呢?

页面中嵌入SVG格式的五种方法:

1、<img/>标签的使用:

<img src="img.svg"/>

注:如果你需要在图片上添加click等事件,建议使用该方法。至于原因就不多加解释,你去实际操作就知道有多大问题了!

2、当做背景图使用:

.img{background:url(img.svg)}

3、用<object>标签引入:

<object type="image/svg+xml" data="img.svg">
</object>

4、<iframe>标签引入:

<iframe src="img.svg"></iframe>

5、<embed>标签引入

<embed type="image/svg+xml" src="img.svg" /><embed>

结语:以上几种方法均能正确引入svg格式图片,但如果你需要SVG图片上添加点击等事件,那么建议使用第一种或者第二种方法来引入图片。

参考资料:

https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/