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属性，则可以更加细化支持到不同宽度屏幕的精确掌控。

虽然这种写法简单易行，然而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-hidden	用于无实际意义的图片，告诉读屏器可以不读此处内容
aria-label	用于不可见的文字标签
aria-labelledby	用于可见的文字标签
aria-describedby	用于较长的文字描述

这里要注意的是，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.