但您马上就能够体味到 SVG

使用 SVG 输出 Octicon

2016/03/18 · HTML5 ·
SVG

最初的作品出处:
aaronshekey   译文出处:[百度EFE

  • Justineo]()   

GitHub.com 以往不再选择字体来输出Logo了。大家把代码库中颇具的 Octicon
替换到了 SVG 版本。固然这一个改换并不那么显然,但您当时就会体味到 SVG
Logo的优点。

图片 1

Octicon 上的看待

切换来 SVG
今后,图标会作为图片渲染而非文字,那使其在别的分辨率下都能很好地在各样像素值下显得。能够比较一下左方放大后的字体版本和右边手清晰的
SVG 版本。

干什么选取 SVG?

Logo字体渲染难点

Logo字体平素只是一种 hack。大家事先使用多少个自定义字体,并将Logo作为
Unicode 符号。这样Logo字体就足以因而包装后的 CSS
来引进。只要轻便地在猖狂元素上加多一个class,Logo就足以显得出来。然后大家只使用 CSS
就能即时更改图标的尺寸和颜色了。

不幸的是,纵然那一个Logo是矢量图形,但在 1x
显示器下的渲染效果并不完美。在依靠 WebKit的浏览器下,Logo恐怕会在少数窗口宽度下变得模糊。因为此时Logo是用作文本输出的,本来用于坚实文书可读性的次像素渲染手艺反而使Logo看起来不好许多。

对页面渲染的校对

因为我们间接将 SVG 注入
HTML(那也是我们挑选这种方法更加大的缘由),所以不再会产出图标字体下载、缓存、渲染进度中冒出的体制闪动。

图片 2页面闪动

可访谈性

就像在《Logo字体已死》一文中所述,某个用户会覆盖掉
GitHub
的字体。对于患有读写障碍的用户,某个特定字体是更加轻便阅读的。对于修改字体的用户来讲,大家依据字体的Logo就被渲染成了空白方框。那搞乱了
GitHub 页面布局,况兼也不提供任何消息。而不管字体覆盖与否,SVG
都得以符合规律呈现。对于读屏器用户来讲,SVG
能让我们采用是读出 alt 属性依旧平素完全跳过。

图表尺寸更合适

大家脚下对每一个Logo在全体尺寸下提供单纯的图片。因为站点的加载注重了图标字体的下载,大家曾被迫把Logo集限制在最重大的
16px 尺寸下。那让各样符号在视觉上做出一些投降,因为我们是针对性 16px
方格实行优化的。当在新页面或经营出售页上缩放那么些Logo时,展现的如故 16px
的本子。而 SVG 可以一本万利地 fork
全体的Logo集,在大家钦赐的各样尺寸提供更适合的图样。当然对图标字体也得以这么做,但与此相类似用户要求下载两倍的数据量,恐怕越多。

方便人民群众创作

卷入自定义字体是良莠不齐的。一些 web
应用由此而生,我们中间也要好搞了二个。而用 SVG
的话,增加叁个新Logo会变得像把一个 SVG 文件拖入一个目录那样轻易。

可增加动画成效

毫不必然要加动画,而是有了增加动画的可能。并且 SVG
动画也真正在举个例子预加载动画等地点有实际行使。

但您马上就能够体味到 SVG。何以达成

Octicon 在整个 GitHub 的代码库中现身了约 2500 次。在用 SVG
此前,大家大概地用 但您马上就能够体味到 SVG。“ 那样简单的价签来引进。要切换来SVG,大家先给增多了叁个用来往 HTML 内直接流入 SVG 路线的 Rails
helper。大家先用这一个 helper 让职员和工人测量试验了差异的 SVG
输出格局,然后才对外揭橥。

Helper 的用法

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

但您马上就能够体味到 SVG。输出

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。 注明来修改颜色。

大家以往有二个 SVG
图形的目录并非三个Logo字体,大家经过甄选,将里面那几个标志的门径用
helper 直接注入到 HTML
里。举例,通过 <%= octicon(:symbol => "alert") %> 来调用 helper
就能够的到三个警示图标。Helper 会查找同名的公文名,并且注入 SVG。

但您马上就能够体味到 SVG。咱俩尝试过好三种在页面中增加 SVG Logo的主意,个中多少是因为遭逢 GitHub
生产条件的限制而输球了。

  1. 表面 .svg 文件——最伊始我们品尝提供一个单纯的外表“SVG
    仓库”,然后用 <use>但您马上就能够体味到 SVG。 成分来引进 SVG
    拼图中的单个图形。在我们近日的跨域安全计谋和财富管道条件下,提供在外表提供
    SVG 拼图很难成功。
  2. SVG 背景——这种方法无法实时调解Logo的水彩。
  3. 用 <img> 与 src 属性来引进 SVG——这种艺术无法实时调度Logo的颜料。
  4. 将“SVG 饭店”整个嵌入到各样视图,然后使用 <use> ——把各样 SVG
    都放到到整个 GitHub.com
    的各样单页想想就窘迫,特别是一时候那个页面四个Logo都没用到。

性能

在切换成 SVG
以往,大家还没觉察页面加载和属性上有任何不良影响。大家之前曾估算渲染时间会小幅度回退,但频仍质量和人的感知更相关。由于
SVG
Logo被渲染为了钦定宽高的图像,页面也不再会像从前那样闪动了。

还要鉴于大家不再输出字体相关的 CSS,大家还是能够干掉一部分剩余的 CSS
代码。

缺欠和坑

  • Firefox 对 SVG 还是有像素值总括的标题,即便图标字体也是有相同的难点。
  • 借使您供给 SVG 有背景象,你大概须要在外面包一层额外的 div。
  • 由于 SVG 是用作图片提供的,有些 CSS
    的覆盖难题也需求再一次考量。如若你看来咱们的页面布局有任何不测的地点,请报告。
  • IE 浏览器下,须求对 svg 成分钦点宽高属性,技艺符合规律展现大小。
  • 在本领方案升级历程中,我们层相同的时候输出 SVG
    和Logo字体。在大家如故为种种 SVG Logo钦点 font-family 时会导致 IE
    崩溃。在一齐转向 SVG 以往,那么些难点就化解了。

总结

通过换掉Logo字体,大家能更平价、更便捷、更有可访谈性地提供Logo了。并且它们看起来也更棒了。享受吗。

1 赞 2 收藏
评论

图片 3

发表评论

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