SVG fallback 及可读性

| 导语 这里谈到的svg回退，不针对于动画的回退，针对于面对高清屏的日益普及项目中所利用svg矢量图形，所做的图片和图标的回退。目前类似的高清处理方案还有icon fonts，也有多倍图，经过项目中不断尝试和总结，svg目前可能是最符合我们预期的方案，无论是浏览器渲染后的效果，还是出于对设计师的工作成本的考虑，以及后期各个环节人员配合的效率来看，svg都有过人之处。（具体推演过程参看ISUX博文）

1. 为什么使用SVG

体积小，可压缩

与同类图片相比，在体积上有优势，同时作为一种XML文件，对gzip的压缩支持度好。

矢量，清晰

可以任意改变大小，不会影响图片质量。

可交互

可对图形元素进行操作。

2. 支持高清屏

2.1 常见的svg使用方法

2.2 background-image

从最基本的背景图说起。

使用方法如下图：

因为各种方法的浏览器支持度会有些许差别，所以单独罗列(点击图片可查看)：

回退：

常用的有两种方法，1.使用类名来区分，对不支持的浏览器，单独加载png; 2. 使用-webkit-image-set 写法对支持svg的高清屏，使用svg图片，对于普通屏使用1倍png。

2.3 img标签

用法与图片无异，非常简单。

浏览器支持(点击图片可查看)：

回退：

主要有两种方法，一种通过脚本方式，对不支持的浏览器加载普通图片。

（线上有很多成熟的库可以用，比如Modernizr, 是一个开源的功能检测类JS库，可允许基于用户不同UA，开发不同的体验，即在支持HTML5和CSS3的浏览器中利用这些特性开发，又不会牺牲其他不支持这些特性的浏览器的支持，即，比如检测到有CSS3特性时，可以选择是否创建一个基于JS的回退，对不支持的UA降级体验。）

另外一种方法使用标签的支持性与svg支持可以达到降级效果，如果附加上srcset属性，则可以更加细化支持到不同宽度屏幕的精确掌控。

<img srcset="graph-small.png, graph-medium.png 400, graph-large.png 800" alt=“qcloud-logo”>

虽然这种写法简单易行，然而ie至今也不支持元素，那会牺牲掉ie9/10/11下高清屏的体验效果。

2.4 inline SVG

此外SVG还有如标题三种使用方法。

浏览器支持度(点击图片可查看)：

回退：

对于此类都可以使用为不支持浏览器提供图片的方式。

特别想说：如果行内的svg大家要使用DataURI的方式以达到减少HTTP请求的目的，那么Base64并不是一个好的选择，它只会造成页面的臃肿，也不利于页面压缩。

2.5 一些思考

在使用SVG之初，还是要考虑清楚是否一定需要对高清适配，此外要采用SVG的图片是否适合做成SVG，再比如，如果SVG承担一部分的动画和可交互效果，那么回退的结果是否会对一大部分用户造成体验上的损失。最后，现在没有一个完美的svg回退效果，所以使用时，需谨慎。

3. SVG的可读性

由于SVG采用的是XML的语法，图形的里的文本内容可以被浏览器，搜索引擎和读屏软件读取，所以本身具有可读性好，有利于SEO，对无障碍友好等特点。

3.1 inline SVG

对于inlineSVG，可以使用标签对图形进行描述，要注意的是，title标签一定要是第一个子元素。

3.2 Img标签

对于

图片方式引入的SVG，以腾讯云的业务为例，如果要展示下图的场景，建议代码如下。

这里面有两点值得注意，1，aria标签；2. alt标签的alternative text

3.2.1 ARIA标签

ARIA是无障碍的一个建议标准，如果要对读屏软件友好，我们需要对图形添加一些无障碍的属性。role="group"或 role="img"指定角色，然后在选择对应的属性进行文字注释，比如上图用到了 aria-labelledby。

其中较为常用的标签有以下几种：

这里要注意的是，aria-label与aria-labelledby是一对相爱相杀的怨侣，在W3C中，对他们两个的适用范围有着严格的规定：

If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label. There may be instances where the name of an element cannot be determined programmatically from the content of the element, and there are cases where providing a visible label is not the desired user experience. Most host languages provide an attribute that could be used to name the element (e.g., the title attribute in HTML [HTML]), yet this could present a browser tooltip. In the cases where a visible label or visible tooltip is undesirable, authors MAY set the accessible name of the element using aria-label. As required by the text alternative computation, user agents give precedence to aria-labelledby over aria-label when computing the accessible name property.

3.2.2 Alternative text

无论是SVG，还是一张普通的图片，我们都需要为它添置alt标签，即使没有内容需要写，但也需要留下一个为空的alt标签：alt="".

什么是一个好的alternative text呢，先举个例子

Example 1：

如上图，页面中要对照片alt标签设置文字，以下哪个选项是最合适的？

A.“fufu的一张照片”

B.“fufu是个学武奇才”

C.   Alt 标签置空 alt=“”

D.“fufu”

A选项的描述毫无意义，B选项中的内容与下面文字有重合，C为空，然后图片又不是确实没有内容，D为最合适的描述。

Example2：

如上图，页面中要对照片alt标签设置文字，以下哪个选项是最合适的？

A.“图片”

B.“fufu”

C.   图片不需要alt属性

D.  Alt标签置空，即 alt=""

A选项无法描述照片内容，B选项的文字与下面标题重复，C选项是在与规范作对，D选项是最好的选择

Example3：

如上图，照片是可点的，页面中要对照片alt标签设置文字，以下哪个选项是最合适的？

A.“查看更多”

B.“fufu的相册入口”

C.   fufu

D.  Alt标签置空，即 alt=""

之前连续选D，但这次再选D就不对了，：）

A选项显然与内容不符，B选项无法从照片中看出来是相册的入口，D选项不能描述链接及图片的指向，因此C选项告诉用户是用一个fufu的链接是最合适的。

Example4：

如上图，照片及文字同时可点，页面中要对照片alt标签设置文字，以下哪个选项是最合适的？

A.“查看更多”

B.“fufu的相册入口”

C.   fufu

D.  Alt标签置空，即 alt=""

此处最佳的选择应该是D，其他原因与上题相似，这里因为有了标题可点，再写fufu有重复之嫌，所以选择D即可。

讲到这里，文章到了尾声，研究了一些规范和资料，所以写了这篇笔记，希望大家读完可以有些收获。

感谢你的阅读，本文由 腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。

注明出处格式：腾讯ISUX (https://isux.tencent.com/card-design-thinking.html)