新闻资讯

当前位置:新萄京娱乐场手机版 > 新闻资讯 > 我们已经在所有代码库中用SVG替换Octicons,但你马

我们已经在所有代码库中用SVG替换Octicons,但你马

来源:http://www.chrisproduction.com 作者:新萄京娱乐场手机版 时间:2019-10-31 22:13

图形尺寸更合适

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

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

图标字体渲染问题

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

不幸的是,虽然这些图标是矢量图形,但在 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>

提高可访问性

缺点和坑

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

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

可添加动画效果

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

我们还可以结束CSS的膨胀,因为我们不再需要字体的CSS。

我们的方案

可以看见,我们最终上线的方案是往页面 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 的每个单页想想就不对,特别是有时候这个页面一个图标都没用到。

1、 SVG在火狐浏览器中仍然存在pixel-rounding错误,虽然icon font也存在同样问题。

使用 SVG 输出 Octicon

2016/03/18 · HTML5 · SVG

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

  • Justineo]()   

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

图片 1

Octicon 上的对比

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

4、 为保证尺寸正确,IE需要明确指定SVG的width和height属性

对页面渲染的改进

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

图片 2页面闪动

性能

可访问性

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

总结

性能

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

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

输出

总结

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

1 赞 2 收藏 评论

图片 3

怎么做

如何实现

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

  1. External .svg — 我们首先尝试提供一个简单的外部“svgstore” 。我们包含一个独立的元素.由于我们当前的跨域策略和生产线,我们发现很难提供外部SVG。

  2. SVG背景图片 — 这种方案无法联机修改我们的图标颜色。

  3. 通过img和src属性链接SVG — 这种方案无法联机修改我们的图标颜色。

  4. 使用在每个视图中嵌入整个“svgstore” — 让GitHub.com的每个页面都包含所有SVG图形让人感觉很不爽,特别是一个页面不仅有一个图标的情形。

为何使用 SVG?

我们的Octicons在GitHub代码库里出现了将近2500次。与SVG相比,Octicons可以包含在一个简单的span里 。切换到SVG,我们首先添加一个Rails Helper用来将SVG path直接注入我们的标记。得益于我们的Helper,在正式发布前我们可以测试SVG的各种方法。和SVG共同使用是一个比较好的方式,如果出于各种原因,我们需要回滚到图标字体,我们只需修改Helper的输出。

便于创作

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

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

译自:Delivering Octicons with SVG

为什么使用SVG

更多精彩译文

我们发现切换到SVG后,页面加载和性能没有受到影响。我们曾期望在渲染时间上有更大幅度的下降,但性能经常受多种因素影响。因为SVG图标在页面中的渲染是和和图片一样根据指定的宽度和高度,页面还不能接近jank的速度。

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

输入

我们的方式

就像Death to Icon Fonts里的布局一样,一些用户覆盖了GitHub的字体。对于有阅读障碍的人,有些字体难以识别。由于他们字体的修改,我们基于字体的图标会被渲染成空方块。这些混乱的GitHub页面布局无法提供任何有意义的显示。SVG的显示不受字体覆盖的影响。对于屏幕阅读器,SVG为我们提供了使用alt键发音和关闭发音的功能。

虽然没说要做,但我们确实可以做,尽管SVG动画确实有一些实际应用的预加载动画,如 preloader animations

创建自定义字体是一件很累的工作。已经出现一些web应用可以解决这种痛苦。在内部我们创建了我们自己的私有工具。使用SVG创建一个新的图标就像拖拽一个SVG到一个文件夹一下容易。

Helper的用法

2、 如果想给SVG背景色,你可能需要用另一个div来包住他们。

字形尺寸合适

与图标字体不同,我们现在有一个SVG目录,根据所选择的图形我们的helper可以将SVG的path直接注入到标记。假如我们需要一个警告图标,我们调用helper <%= octicon(:symbol => "alert") %>。它会查找同名文件并注入SVG。

3、 因为 SVG是做为image提供,可能一些css覆盖问题需要重新考虑。如果你看到我们排版有任何奇怪的地方,请告诉我们。

图片 4

5、 在过渡期间我们同时使用了SVG和图标字体。当我们仍然将font-family应用于每一个SVG图标时会导致IE崩溃。在过渡到全SVG后这个问题得到了彻底解决。

你可以看到我们使用直接注入的方式将SVG直接注入到页面标记中。所以我们可以在联机情况下通过CSS的fill: 声明,很灵活地修改图标颜色,

图片 5

对于每一个图标, 现在我们提供了一个字形的所有尺寸。因为我们网站的加载速度依赖于我们字体图标的下载,我们被迫限制图标集使用必备的16像素大小。因为我们为16像素网络做了优化,导致在每一个符号的视觉效果上被迫做出让步。当我们在blankslates和市场营销页面缩放我们的图标时,我们仍然使用16像素的图标显示。使用SVG,我们可以很容易地复制整套图标集并且可以指定任何尺寸,提供更合适的字形。我们也可以使用我们的图标字体做同样的事情,但我们的用户需要下载两倍的数据下载量,甚至更大。

易于创作

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

图标字体渲染问题

图片 6图片 7

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

可以改进页面渲染

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

可以添加动画效果

为了将SVG图标添加到我们的页面,我们尝试了很多方案,由于GigHub生产环境的限制,一些方案是行不通的死胡同。

放弃图标字体后,我们提供的svg图标更易用,更快速,可访问性更好。他们看起来也更棒。好开森。

本文由新萄京娱乐场手机版发布于新闻资讯,转载请注明出处:我们已经在所有代码库中用SVG替换Octicons,但你马

关键词:

上一篇:Transition)来实现的

下一篇:禁止转载