但您及时就能够体味到 SVG

使用 SVG 输出 Octicon

2016/03/18 · HTML5 ·
SVG

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

  • Justineo]()   

GitHub.com 以后不再行使字体来输出Logo了。大家把代码库中装有的 Octicon
替换到了 SVG 版本。就算这几个改变并不那么显然,但您立时就会体会到 SVG
Logo的长处。

图片 1

Octicon 上的自己检查自纠

切换来 SVG
以往,Logo会作为图片渲染而非文字,那使其在任何分辨率下都能很好地在各个像素值下显得。能够比较一下左侧放大后的字体版本和侧面清晰的
SVG 版本。

何以接受 SVG?

Logo字体渲染难题

Logo字体平昔只是意气风发种 hack。大家事先使用二个自定义字体,并将图标作为
Unicode 符号。那样Logo字体就足以经过包装后的 CSS
来引进。只要轻易地在猖狂成分上加多一个class,Logo就足以体现出来。然后我们只行使 CSS
就会即时改换Logo的尺寸和颜色了。

不好的是,就算那么些Logo是矢量图形,但在 1x
显示屏下的渲染效果并不可以。在凭仗 WebKit的浏览器下,Logo恐怕会在好几窗口宽度下变得模糊。因为那时候Logo是用作文本输出的,本来用于加强公文可读性的次像素渲染技巧反而使Logo看起来糟糕好多。

对页面渲染的改过

因为大家一贯将 SVG 注入
HTML(那也是大家筛选这种艺术更大的案由卡塔 尔(英语:State of Qatar),所以不再晤面世Logo字体下载、缓存、渲染进度中现身的体制闪动。

图片 2页面闪动

可访问性

就像在《Logo字体已死》一文中所述,有个别客商会覆盖掉
GitHub
的字体。对于患有读写障碍的客商,有些特定字体是更为轻易阅读的。对于修正字体的客户来讲,大家遵照字体的Logo就被渲染成了空白方框。这搞乱了
GitHub 页面布局,何况也不提供别的音信。而不管字体覆盖与否,SVG
都可以健康展现。对于读屏器客户来讲,SVG
能让我们选取是读出 alt 属性依旧一直完全跳过。

图表尺寸更适于

小编们脚下对每一种Logo在富有尺寸下提供单纯的图形。因为站点的加载注重了Logo字体的下载,大家曾被迫把Logo集约束在最要紧的
16px 尺寸下。那让各类符号在视觉上做出一些投降,因为大家是针对 16px
方格实行优化的。当在新页面或营销页上缩放那一个Logo时,展现的依然 16px
的版本。而 SVG 能够渔人之利地 fork
全部的Logo集,在大家内定的各种尺寸提供更妥贴的图形。当然对Logo字体也足以如此做,但这么顾客须求下载两倍的数据量,或然越多。

造福创作

装进自定义字体是复杂的。一些 web
应用因而而生,我们此中也要好搞了一个。而用 SVG
的话,加多一个新Logo会变得像把三个 SVG 文件拖入三个索引那样十拿九稳。

可增加动漫成效

永不必须求加动画,而是有了充分动漫的恐怕性。而且 SVG
动漫也确实在诸如预加载动漫等地点有实际应用。

何以贯彻

Octicon 在全路 GitHub 的代码库中出现了约 2500 次。在用 SVG
早先,大家大约地用 “ 那样总结的标签来引进。要切换来SVG,大家先给增加了一个用来往 HTML 内一贯流电入 SVG 路线的 Rails
helper。我们先用那么些 helper 让职员和工人测量试验了不一致的 SVG
输出方式,然后才对外发布。

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
图形的目录实际不是贰个Logo字体,大家透过选择,将内部那个标志的路子用
helper 直接流入到 HTML
里。例如,通过 <%= octicon(:symbol => "alert") %> 来调用 helper
就能够的到二个警示Logo。Helper 会查找同名的文书名,並且注入 SVG。

我们尝试过好三种在页面中加多 SVG Logo的秘技,此中多少是因为直面 GitHub
分娩条件的限定而倒闭了。

  1. 外表 .svg 文件——最开头大家品尝提供一个单纯的外界“SVG
    宾馆”,然后用 <use> 元平素引进 SVG
    拼图中的单个图形。在我们方今的跨域安全攻略和财富管道条件下,提供在外界提供
    SVG 拼图很难做到。
  2. SVG 背景——这种方法不可能实时调度Logo的颜色。
  3. 用 <img> 与 src 属性来引进 SVG——这种格局无法实时调节Logo的水彩。
  4. 将“SVG 客栈”整个嵌入到各样视图,然后采取 <use> ——把各样 SVG
    都置于到全数 GitHub.com
    的各样单页用脑筋想就难堪,特别是临时候这一个页面多个图标都没用到。

性能

在切换来 SVG
今后,大家还未开采页面加载和性质上有任何不良影响。大家以前曾预测渲染时间会小幅下挫,但往往品质和人的感知更相关。由于
SVG
Logo被渲染为了钦赐宽高的图像,页面也不再会像以前那么闪动了。

与此同期由于我们不再输出字体相关的 CSS,我们还可以干掉风流洒脱部分剩余的 CSS
代码。

症结和坑

  • Firefox 对 SVG 依然有像素值总计的主题材料,即使Logo字体也会有生机勃勃致的主题素材。
  • 假定您供给 SVG 有背景观,你只怕供给在外侧包风姿罗曼蒂克层额外的 div。
  • 出于 SVG 是作为图片提供的,某个 CSS
    的遮盖难题也急需再行考量。即使你看见大家的页面布局有其余不测的地点,请告知。
  • IE 浏览器下,须求对 svg 成分内定宽高属性,才干健康展现大小。
  • 在技术方案升级进程中,我们层同期输出 SVG
    和Logo字体。在大家照例为各样 SVG Logo钦命 font-family 时会导致 IE
    崩溃。在一丝一毫转向 SVG 未来,这几个主题素材就清除了。

总结

通过换掉图标字体,大家能更利于、更便捷、更有可访谈性地提供Logo了。何况它们看起来也更棒了。享受呢。

1 赞 2 收藏
评论

图片 3

相关文章