几种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 条评论
登录 后参与评论

相关文章

来自专栏Python疯子

iOS 之多个 button 的单选与多选

下面是实现的代码: 首先创建10个button(一个一个写太麻烦了,个人认为还是用一个 for 循环来创建比较好)

531
来自专栏张善友的专栏

WCF服务上应用protobuf

protobuf是google提供的一个开源序列化框架,类似于XML,JSON这样的数据表示语言,其最大的特点是基于二进制,因此比传统的XML表示高效短小得多。...

1996
来自专栏MelonTeam专栏

开发中容易忽略和挖坑的场景总结

总结代码设计时容易忽略的场景,需求启动阶段就考虑好各个场景,可以提高代码的健壮性,有效减少bug数。

2396
来自专栏十月梦想

Express框架实现GET和POST请求

GET请求在原生node中我们使用了path.query等查询方式,在express框架提供了极其简单的方式(req.query)就简单获取到了传递的内容;

613
来自专栏陈树义

MyCat 启蒙:分布式系统的数据库架构演变

单数据库架构 一个项目在初期的时候,为了尽可能快地验证市场,其对业务系统的最大要求是快速实现。在这个阶段,代码开发人员为了能快速实现业务系统,一般都是将所有层...

3216
来自专栏Java架构

干货:大型互联网公司分布式缓存的优秀实践和线上案例在此我在推荐一个学习架构框架的学习体系:

2616
来自专栏zhangdd.com

亿级请求下多级缓存那些事 转载

摘要: 什么是多级缓存 所谓多级缓存,即在整个系统架构的不同系统层级进行数据缓存,以提升访问效率,这也是应用最广的方案之一。我们应用的整体架构如图1所示: 图1...

723
来自专栏IMWeb前端团队

css中如何做到容器按比例缩放

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 在说容易按比例缩放前,我们先说下图片按比例缩放。 对于图片,默认只设置图片的...

2209
来自专栏程序你好

提高JavaScript动画的性能

802
来自专栏FD的专栏

实施微前端的六种方式(上):三种借助路由微服务化前端应用

微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

711

扫码关注云+社区