几种SVG图像的fallbacks

在网页前景图像的使用上,针对不同像素比的屏幕,常规的做法是使用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:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2">

<style>

.a,.b{

width: 200px;

height: 200px;

margin-left: 50px;

border: #eee 1px solid;

background: #2277da;

}

div img{

width: 100%;

}

p{

font: 14px;

padding: 20px 20px;

}

</style>

</head>

<body>

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

</p>

<div class="a">

<picture>

<source type="image/svg+xml" srcset="https://www.chengrang.com/svgfallbacks/svg.svg">

<img src="https://www.chengrang.com/svgfallbacks/svg.png" alt="">

</picture>

</div>

</body>

</html>

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

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

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

demo:

 <!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2">

<style>

.a,.b{

width: 200px;

height: 200px;

margin-left: 50px;

border: #eee 1px solid;

background: #2277da;

}

div img{

width: 100%;

}

p{

font: 14px;

padding: 20px 20px;

}

</style>

</head>

<body>

<p>srcset="svg.svg 2X" 方式,在2倍屏显示SVG,在其他显示PNG,缺点同上</p>

<div class="a">

<picture>

<source srcset="https://www.chengrang.com/svgfallbacks/svg.svg 2X">

<img src="https://www.chengrang.com/svgfallbacks/svg.png" alt="">

</picture>

</div>

</body>

</html>

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

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

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

demo:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2">

<style>

.a,.b{

width: 200px;

height: 200px;

margin-left: 50px;

border: #eee 1px solid;

background: #2277da;

}

div img{

width: 100%;

}

p{

font: 14px;

padding: 20px 20px;

}

</style>

</head>

<body>

<p>svg标签方式,缺点必须指定宽高,没有图片的保持款高比例特性,优点兼容性好</p>

<div class="a">

<svg width="200" height="200">

<image xlink:href="https://www.chengrang.com/svgfallbacks/svg.svg" src="https://www.chengrang.com/svgfallbacks/svg.png" width="200" height="200" />

</svg>

</div>

</body>

</html>

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

点击查看DOME集合

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏vue学习

小程序 — 实现左滑删除效果②

(1)在上一章中,我们给movable-view绑定了一个bindchange事件,事件名为onChange,这个事件是干吗的呢?

2772
来自专栏Ray学习笔记

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片幻灯片、下拉菜单、弹出框等,都可以结合JavaScript和CSS实现。在这章,我...

1314
来自专栏前端知识分享

第146天:移动H5前端性能优化

4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB

1524
来自专栏carven

好用的分屏tab react-native-scrollable-tab-view

如果一个人每天都有惊喜的话,我今天的最大惊喜就是找到了一个react-native-scrollable-tab-view。 我们在写一个应用的时候,总是会有需...

1400
来自专栏IT开发技术与工作效率

IntelliJ IDEA 教程 技巧篇本篇概要

1252
来自专栏Golang语言社区

golang进度条

进度条元素 ▪ 总量 ▪ 当前进度 ▪ 耗时 通过以上元素可以延伸出:完成百分比、速度、预计剩余时间、根据设置速度快慢阈值用不同的颜色来显示进度条。 实现 进度...

42910
来自专栏互联网杂技

一些好用的jquery技巧

1、返回顶部按钮 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to to...

3346
来自专栏Android小菜鸡

自定义组件——ModuleView

  ModuleView是一个模快化的View。可以快速搭建一个常用的模块页面,显示不同模块的数据内容。它的难点在于解决ScrollView与RecyclerV...

1011
来自专栏mathor

matlab—图形界面(GUI)程序设计

matlab也能做应用程序,类似于c++的mfc,这点我也是才知道,大吃一惊,原来现在可视化编程应用如此广泛,连matlab都可以,接下来我就会讲解如何通过ma...

3122
来自专栏ytkah

通过图片定位给一张图片添加多个链接

  我们在建站的时候使用图片素材能为整个网站增色不少,但是太多的边框按钮图片会增加请求次数,从而降低网站加载速度,这时我们可以考虑将多个小图片元素集合到一张图片...

2523

扫码关注云+社区

领取腾讯云代金券