译自:Delivering Octicons with SVG
GitHub.com不再通过图标字体实现图标集。取而代之，我们已经在所有代码库中用SVG替换Octicons。这个变化主要发生在底层，你会立刻感受到SVG图标带来的好处。
使用SVG渲染的图像来替换文本类型的图标，使得我们的图标集在任何分辨率下都可以保持高质量的全像素值。上面图片是一个对比，左边是是放大的字体图标，右边是清晰的SVG图标。
为什么使用SVG
图标字体渲染问题
Icon字体始终是一种侵入式做法。我们最初使用unicode符号自定义我们的图标。这样可以将我们的图标和CSS捆绑。任何元素只需要简单地添加一个class就可以显示图标。并非我们只需要修改CSS就可以联机调整图标的大小和颜色。
不幸地是，尽管这些图标是矢量图形，他们常常只能渲染成效果较差的1x显示。使用基于Webkit的浏览器，根据窗口宽度不同你会看到一些模糊的图标。我们的图标是使用文本，这意味着亚像素渲染可以改善易读性，但这却让我们的图标看起来很糟糕。
可以改进页面渲染
由于我们的SVG是直接注入标记（ 这也是我们为什么在一个点使用这种方案的主要原因 ），因为图标字体已经下载，缓存和渲染，我们看到的不再是一个非样式化内容
提高可访问性
就像Death to Icon Fonts里的布局一样，一些用户覆盖了GitHub的字体。对于有阅读障碍的人，有些字体难以识别。由于他们字体的修改，我们基于字体的图标会被渲染成空方块。这些混乱的GitHub页面布局无法提供任何有意义的显示。SVG的显示不受字体覆盖的影响。对于屏幕阅读器，SVG为我们提供了使用alt键发音和关闭发音的功能。
字形尺寸合适
对于每一个图标， 现在我们提供了一个字形的所有尺寸。因为我们网站的加载速度依赖于我们字体图标的下载，我们被迫限制图标集使用必备的16像素大小。因为我们为16像素网络做了优化，导致在每一个符号的视觉效果上被迫做出让步。当我们在blankslates和市场营销页面缩放我们的图标时，我们仍然使用16像素的图标显示。使用SVG，我们可以很容易地复制整套图标集并且可以指定任何尺寸，提供更合适的字形。我们也可以使用我们的图标字体做同样的事情，但我们的用户需要下载两倍的数据下载量，甚至更大。
易于创作
创建自定义字体是一件很累的工作。已经出现一些web应用可以解决这种痛苦。在内部我们创建了我们自己的私有工具。使用SVG创建一个新的图标就像拖拽一个SVG到一个文件夹一下容易。
可以添加动画效果
虽然没说要做，但我们确实可以做，尽管SVG动画确实有一些实际应用的预加载动画，如 preloader animations
怎么做
我们的Octicons在GitHub代码库里出现了将近2500次。与SVG相比，Octicons可以包含在一个简单的span里 。切换到SVG,我们首先添加一个Rails Helper用来将SVG path直接注入我们的标记。得益于我们的Helper，在正式发布前我们可以测试SVG的各种方法。和SVG共同使用是一个比较好的方式，如果出于各种原因，我们需要回滚到图标字体，我们只需修改Helper的输出。
Helper的用法
输入
<%= octicon(:symbol => "plus") %>
输出
我们的方式
你可以看到我们使用直接注入的方式将SVG直接注入到页面标记中。所以我们可以在联机情况下通过CSS的fill: 声明，很灵活地修改图标颜色，
与图标字体不同，我们现在有一个SVG目录，根据所选择的图形我们的helper可以将SVG的path直接注入到标记。假如我们需要一个警告图标，我们调用helper <%= octicon(:symbol => "alert") %>。它会查找同名文件并注入SVG。
为了将SVG图标添加到我们的页面，我们尝试了很多方案，由于GigHub生产环境的限制，一些方案是行不通的死胡同。
1. External .svg — 我们首先尝试提供一个简单的外部“svgstore” 。我们包含一个独立的元素.由于我们当前的跨域策略和生产线，我们发现很难提供外部SVG。
2. SVG背景图片 — 这种方案无法联机修改我们的图标颜色。
3. 通过img和src属性链接SVG — 这种方案无法联机修改我们的图标颜色。
4. 使用在每个视图中嵌入整个“svgstore” — 让GitHub.com的每个页面都包含所有SVG图形让人感觉很不爽，特别是一个页面不仅有一个图标的情形。
性能
我们发现切换到SVG后，页面加载和性能没有受到影响。我们曾期望在渲染时间上有更大幅度的下降，但性能经常受多种因素影响。因为SVG图标在页面中的渲染是和和图片一样根据指定的宽度和高度，页面还不能接近jank的速度。
我们还可以结束CSS的膨胀，因为我们不再需要字体的CSS。
缺点和遗漏
1、 SVG在火狐浏览器中仍然存在pixel－rounding错误，虽然icon font也存在同样问题。
2、 如果想给SVG背景色，你可能需要用另一个div来包住他们。
3、 因为 SVG是做为image提供，可能一些css覆盖问题需要重新考虑。如果你看到我们排版有任何奇怪的地方，请告诉我们。
4、 为保证尺寸正确，IE需要明确指定SVG的width和height属性
5、 在过渡期间我们同时使用了SVG和图标字体。当我们仍然将font-family应用于每一个SVG图标时会导致IE崩溃。在过渡到全SVG后这个问题得到了彻底解决。
总结
放弃图标字体后，我们提供的svg图标更易用，更快速，可访问性更好。他们看起来也更棒。好开森。
网友评论