1、作为图片使用的 svg 文件
如果你的 svg 是作为 的 src 引入的，务必为 添加 role="img" 属性：
如果不加 role="img"，有些屏幕阅读器不会将 
2、作为图标使用的 svg
svg 作为图标使用时，请使用 aria-hidden="true" 对访问设备隐藏，添加一个视觉上隐藏（visually-hidden）的兄弟元素作为图标的文本语义说明。
如上，为 aria-hidden="true"，让其对访问设备隐藏。之后的 .sr-only 就是所谓的视觉隐藏元素——只是视觉上看不见，但会被屏幕阅读读到。
3、ie 的 bug
网页如果需要兼容 ie，那么在使用 的时候，需要显式添加 focusable="false" 属性。
原因是为：在 ie 浏览器上关于 svg 的一个 bug。大家知道，svg 默认是不会被聚焦的，但在 ie 中，如果 svg 包含在像链接、按钮这样的可聚焦元素里时，使用 tab 是可以被聚焦的。这就导致父元素聚焦后，子元素又被聚焦的情况发生。
4、safari 10 的 bug
在 safari 10 中，如果 中包含 ，务必在两者中间使用空格隔开。
否则，使用键盘 tab 访问到这里的时候，跳不过去。不够之后的版本的已经修复了，如果你的网页需要支持 safari 10 的话，就需要注意这个。
5、作为图片使用的 svg
有时需要将 svg 文件作为单独的图片使用，那么跟第二条类似的是，添加一个视觉隐藏元素作为语义说明使用。
之所以没有选择以 的形式添加说明，是因为如果 不是在可聚焦元素里使用的时候，有些屏幕阅读器不会正确朗读 aria-label 属性。
6、支持 ie8- 浏览器
在 ie8- 浏览器中， 中的
...
7、色彩对比
设计 svg 图标时，一定要考虑到色弱用户、或在高对比黑色背景主题下（high contrast theme）使用的用户。举一个例子，设计图标的时候，可以考虑使用实心的背景加上颜色鲜明边框。
