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.2 ![]()
![]()
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.3 inline SVG
此外SVG还有如标题三种使用方法。
浏览器支持度(点击图片可查看)：
回退：
对于此类都可以使用为不支持浏览器提供图片的方式。
特别想说：如果行内的svg大家要使用DataURI的方式以达到减少HTTP请求的目的，那么Base64并不是一个好的选择，它只会造成页面的臃肿，也不利于页面压缩。
2.4 一些思考
在使用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.
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即可。
讲到这里，文章到了尾声，研究了一些规范和资料，所以写了这篇笔记，希望大家读完可以有些收获。