几种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>
提示：你可以先修改部分代码再运行。
在连接数上以上三种方式都只会有一个并发
![31·灵魂前端工程师养成-[项目]前端导航网站](https://ask.qcloudimg.com/http-save/yehe-7532292/71a3774e59ab72cea06c289c00d543d7.jpg)
腾讯云开发者
