专栏首页练小习的专栏几种SVG图像的fallbacks

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

相关文章

  • 可视化格式模型基础应用实例

    今天在群里看到一个需求,先放demo <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

    练小习
  • 带你轻松打开SVG动画的大门

    初学SVG的时候,感觉那一坨一坨的代码难读难懂,现在回过头仔细想想,是因为那时候看文档缺少一些具体的实例,导致学习起来很枯燥。如今SVG已经在前端各个领域都有所...

    练小习
  • css绘图,实现一些特殊形状

    还是和前面的tips一样,多用after和before,能省俩标签!俩!比如这一堆的形状 <!DOCTYPE HTML> <html> <head> <met...

    练小习
  • 容器即服务:从零构建企业级容器集群

    用户1682855
  • Linux笔记(14)| 字符设备驱动基础入门(续)

    (2)obj-m := led_driver.o,这一行就表示我们要将led_driver.c文件编译成一个模块

    飞哥
  • Constructing Roads(最小生成树)

    #include<stdio.h> const int MAXN=110; const int INF=0x7fffffff; int n;//几个城市 i...

    用户1624346
  • 调用Bytom Chrome插件钱包开发Dapp

    测试网水龙头:http://test.blockmeta.com/faucet.php

    比原链Bytom
  • 当Dubbo遇上Arthas:排查问题的实践

    Arthas是Alibaba开源的应用诊断利器,9月份开源以来,Github Star数三个月超过6000。

    kirito-moe
  • VSCode安装使用(Python)

    二、安装python插件 打开VScode,Ctrl+p 输入 "ext install python",搜索时间可能会比较长 选择下载量最高的那个插件点击安装

    py3study
  • 还是畅通工程(最小生成树)

    水题:还是wa了三次。主要问题是行数是n*(n-1)/2,刚开始没有审题,其次直接把结果存储在n里头,导致城市数目发生了改变 #include<stdio.h>...

    用户1624346

扫码关注云+社区

领取腾讯云代金券