Github是如何使用SVG制作图标的

使用 SVG 输出 Octicon

2016/03/18 · HTML5 ·
SVG

原文出处:
aaronshekey   译文出处:[百度EFE

  • Justineo]()   

GitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon
替换成了 SVG 版本。虽然这些改动并不那么明显,但你马上就能体会到 SVG
图标的优点。

图片 1

Octicon 上的对比

切换到 SVG
以后,图标会作为图片渲染而非文字,这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的
SVG 版本。

译自:Delivering Octicons with SVG

为何使用 SVG?

译者:张万程[译]Github是如何使用SVG制作图标的

图标字体渲染问题

图标字体从来只是一种 hack。我们之前使用一个自定义字体,并将图标作为
Unicode 符号。这样图标字体就可以通过打包后的 CSS
来引入。只要简单地在任意元素上添加一个
class,图标就可以显示出来。然后我们只使用 CSS
就能即时改变图标的尺寸和颜色了。

不幸的是,虽然这些图标是矢量图形,但在 1x
显示屏下的渲染效果并不理想。在基于 WebKit
的浏览器下,图标可能会在某些窗口宽度下变得模糊。因为此时图标是作为文本输出的,本来用于提高文本可读性的次像素渲染技术反而使图标看起来糟糕许多。

GitHub.com不再通过图标字体实现图标集。取而代之,我们已经在所有代码库中用SVG替换Octicons。这个变化主要发生在底层,你会立刻感受到SVG图标带来的好处。

对页面渲染的改进

因为我们直接将 SVG 注入
HTML(这也是我们选择这种方式更大的原因),所以不再会出现图标字体下载、缓存、渲染过程中出现的样式闪动。

图片 2页面闪动

图片 3

可访问性

就像在《图标字体已死》一文中所述,有些用户会覆盖掉
GitHub
的字体。对于患有读写障碍的用户,某些特定字体是更加容易阅读的。对于修改字体的用户来说,我们基于字体的图标就被渲染成了空白方框。这搞乱了
GitHub 页面布局,而且也不提供任何信息。而不管字体覆盖与否,SVG
都可以正常显示。对于读屏器用户来说,SVG
能让我们选择是读出 alt 属性还是直接完全跳过。

使用SVG渲染的图像来替换文本类型的图标,使得我们的图标集在任何分辨率下都可以保持高质量的全像素值。上面图片是一个对比,左边是是放大的字体图标,右边是清晰的SVG图标。

图形尺寸更合适

我们目前对每个图标在所有尺寸下提供单一的图形。因为站点的加载依赖了图标字体的下载,我们曾被迫把图标集限制在最重要的
16px 尺寸下。这让每个符号在视觉上做出一些让步,因为我们是针对 16px
方格进行优化的。当在新页面或营销页上缩放这些图标时,显示的还是 16px
的版本。而 SVG 可以方便地 fork
全部的图标集,在我们指定的每个尺寸提供更合适的图形。当然对图标字体也可以这么做,但这样用户需要下载两倍的数据量,可能更多。

为什么使用SVG

便于创作

打包自定义字体是复杂的。一些 web
应用因此而生,我们内部也自己搞了一个。而用 SVG
的话,添加一个新图标会变得像把一个 SVG 文件拖入一个目录这样轻而易举。

图标字体渲染问题

可添加动画效果

并非一定要加动画,而是有了添加动画的可能性。而且 SVG
动画也的确在例如预加载动画等地方有实际应用。

Icon字体始终是一种侵入式做法。我们最初使用unicode符号自定义我们的图标。这样可以将我们的图标和CSS捆绑。任何元素只需要简单地添加一个class就可以显示图标。并非我们只需要修改CSS就可以联机调整图标的大小和颜色。

如何实现

Octicon 在整个 GitHub 的代码库中出现了约 2500 次。在用 SVG
之前,我们简单地用 “ 这样简单的标签来引入。要切换到
SVG,我们先给添加了一个用来往 HTML 内直接注入 SVG 路径的 Rails
helper。我们先用这个 helper 让员工测试了不同的 SVG
输出方式,然后才对外发布。

不幸地是,尽管这些图标是矢量图形,他们常常只能渲染成效果较差的1x显示。使用基于Webkit的浏览器,根据窗口宽度不同你会看到一些模糊的图标。我们的图标是使用文本,这意味着亚像素渲染可以改善易读性,但这却让我们的图标看起来很糟糕。

Helper 的用法

输入 <%= octicon(:symbol => "plus") %>

输出

XHTML

<svg aria-hidden=”true” class=”octicon octicon-plus” width=”12″
height=”16″ role=”img” version=”1.1″ viewBox=”0 0 12 16″> <path
d=”M12 9H7v5H5V9H0V7h5V2h2v5h5v2z”></path> </svg>

1
2
3
<svg aria-hidden="true" class="octicon octicon-plus" width="12" height="16" role="img" version="1.1" viewBox="0 0 12 16">
    <path d="M12 9H7v5H5V9H0V7h5V2h2v5h5v2z"></path>
</svg>

可以改进页面渲染

我们的方案

可以看见,我们最终上线的方案是往页面 HTML 中直接注入
SVG。这样就可以灵活地实时调整 CSS 的 fill: 声明来修改颜色。

我们现在有一个 SVG
图形的目录而不是一个图标字体,我们通过挑选,将里面这些符号的路径用
helper 直接注入到 HTML
里。比如,通过 <%= octicon(:symbol => "alert") %> 来调用 helper
就可以的到一个警告图标。Helper 会查找同名的文件名,并且注入 SVG。

我们尝试过好几种在页面中添加 SVG 图标的方法,其中有些由于受到 GitHub
生产环境的限制而失败了。

  1. 外部 .svg 文件——最开始我们尝试提供一个单一的外部“SVG
    仓库”,然后用 <use> 元素来引入 SVG
    拼图中的单个图形。在我们当前的跨域安全策略和资源管道条件下,提供在外部提供
    SVG 拼图很难做到。
  2. SVG 背景——这种方式无法实时调整图标的颜色。
  3. 用 <img> 与 src 属性来引入 SVG——这种方式无法实时调整图标的颜色。
  4. 将“SVG 仓库”整个嵌入到每个视图,然后使用 <use> ——把每个 SVG
    都嵌入到整个 GitHub.com
    的每个单页想想就不对,特别是有时候这个页面一个图标都没用到。

由于我们的SVG是直接注入标记(
这也是我们为什么在一个点使用这种方案的主要原因
),因为图标字体已经下载,缓存和渲染,我们看到的不再是一个非样式化内容

性能

在切换到 SVG
以后,我们还没发现页面加载和性能上有任何不良影响。我们之前曾预计渲染时间会大幅下降,但往往性能和人的感知更相关。由于
SVG
图标被渲染为了指定宽高的图像,页面也不再会像之前那样闪动了。

同时由于我们不再输出字体相关的 CSS,我们还能干掉一些多余的 CSS
代码。

图片 4图片 5

缺点和坑

  • Firefox 对 SVG 仍然有像素值计算的问题,虽然图标字体也有相同的问题。
  • 如果你需要 SVG 有背景色,你可能需要在外面包一层额外的 div。
  • 由于 SVG 是作为图片提供的,某些 CSS
    的覆盖问题也需要重新考量。如果你看到我们的页面布局有任何奇怪的地方,请告知。
  • IE 浏览器下,需要对 svg 元素指定宽高属性,才能正常显示大小。
  • 在技术方案升级过程中,我们层同时输出 SVG
    和图标字体。在我们仍然为每个 SVG 图标指定 font-family 时会导致 IE
    崩溃。在完全转用 SVG 以后,这个问题就解决了。

提高可访问性

总结

通过换掉图标字体,我们能更方便、更快速、更有可访问性地提供图标了。而且它们看起来也更棒了。享受吧。

1 赞 2 收藏
评论

图片 6

就像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的输出。

发表评论

电子邮件地址不会被公开。 必填项已用*标注