HTML中嵌入SVG图片的N种方式

NickZhou 发布于2019-08-01 17:31 / 848人阅读

摘要：完美总结中嵌入图片的种方式在解决这个问题的过程中，顺便查了下，发现除了这个是最容易想到的因为图片也是图片嘛。不过和标签一样，无法显示内嵌的使用标签标签是新增的一个专门显示图片的标签。

最近用到了个SVG图片，里面还是带标签的，想要把它嵌入到HTML中还是有些工作要做的。

经历

最初的图片是这样写的：

p.s. 先拿百度的图片来凑个数

显示效果应该是：

但是通过后却显示成了：

只显示了图片左上角那部分有木有！这张图片是按2倍图做的，应该要缩小一半，虽然给的元素加了宽高，但是却没能把svg内容给缩放！

怎办？又找了半天解决方案，发现这种情况应该设置svg图片的viewBox -- 在元素上增加viewBox="0 0 660 342"即可解决这个问题：

viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
-- viewBox - MDN

完美！

总结HTML中嵌入SVG图片的N种方式

在解决这个问题的过程中，顺便查了下，发现除了

这个是最容易想到的 -- 因为svg图片也是图片嘛。
需要注意的是，svg里面带的标签将无法正常显示。

注意使用viewBox，标签的兼容性也很不错的，是个不错的选择。

4. 使用object标签

H5 分层屏幕适配