最新消息:你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

几种SVG图像的fallbacks

其他技术 练小习 0评论

在网页前景图像的使用上,针对不同像素比的屏幕,常规的做法是使用2X 3X的图像。
一些特定场景可以使用SVG来完成,因为他的矢量特性,不需要再针对更高的像素比出多套图片。
而使用svg必然要因为兼容性等因素考虑好fallbacks,常用的有几种方式:

1.通过alt或者文本标签的方式做提示
2.通过判断或者查询显示一张图片

通常都不会选择第一种。

第二种,也有多种方案,下面我们列举几个:

1.html的source标签属性 type=”image/svg+xml” 方式,在支持的浏览器里使用SVG,在不支持的浏览器里显示PNG,优点是type灵活,可用于SVG,WEBP等,而且保持了img标签的特性,方便做布局操作。缺点兼容性要求高,ios9+,安卓5+,微软Edge+

<picture>
    <source type="image/svg+xml" srcset="svg.svg">
    <img src="svg.png" alt="">
</picture>

demo:

提示:你可以先修改部分代码再运行。

2.srcset=”svg.svg 2X” 方式,在2倍屏显示SVG,在其他显示PNG,缺点同上

<picture>
    <source  srcset="svg.svg 2X">
    <img src="svg.png" alt="">
</picture>

demo:

提示:你可以先修改部分代码再运行。

3.svg标签方式,缺点必须指定宽高,没有图片的保持款高比例特性,优点兼容性好,兼容所有主流浏览器

<svg width="200" height="200">
        <image xlink:href="svg.svg" src="svg.png" width="200" height="200" />
</svg>

demo:

提示:你可以先修改部分代码再运行。

点击查看DOME集合

在连接数上以上三种方式都只会有一个并发

ie
f
c

转载请注明:练小习的前端技术笔记 » 几种SVG图像的fallbacks

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址