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

相关文章

来自专栏全栈之路

css 关于图片上显示文字

图片上显示文字,现在有很多主流的方法,最常用的就是position设置为relative或者absolute。

425
来自专栏杨龙飞前端

前端命名规范化

1386
来自专栏Android Note

Android O:使用自定义字体资源

913
来自专栏前端架构

移动端开发样式重置及meta标签

1 -webkit-tap-highlight-color-webkit-tap-highlight-color:rgba(0,0,0,0); 透明度设置为0,...

762
来自专栏DannyHoo的专栏

替代图片+文字按钮问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

652
来自专栏web前端

01移动端基本环境和常见问题

一、chrome模拟器(只是模拟尺寸,最终还是需要真机测试)      1、F12手机模拟(emulation)      2、选择或者添加模拟设备 二、本地服...

1909
来自专栏前端侠2.0

Angular Elements 组件在非angular 页面中使用的DEMO

      Angular Elements 是伴随Angular6.0一起推出的新技术。它借助Chrome浏览器的ShadowDom  API,实现一种自定义...

532
来自专栏算法channel

Python-GUI|Label显示图片,Pack布局控件

01 Label显示图片 Label显示文本很简单,直接在构造中将text显示地赋值。 如果Label显示成图片,如何设置? PhotoImage构造出图片,...

4556
来自专栏河湾欢儿的专栏

表单

form 表单 <input type="…… " name="" value="" /> text 文本框 passwor...

682
来自专栏世界第一语言是java

vue点击图片放大预览图片支持旋转等

提到图片放大预览,可能好多人想到的是lightbox,在vue中使用lightbox还挺麻烦,但是伸手党做习惯了,所以去github上搜索了一个,感觉效果很完美...

642

扫码关注云+社区