Github是何等利用SVG制作Logo的

时间:2019-09-26 08:40来源:关于计算机
使用 SVG 输出 Octicon 2016/03/18 · HTML5 ·SVG 初稿出处:aaronshekey   译文出处:[百度EFE Justineo]()    永利皇宫463手机版,GitHub.com 今后不再动用字体来输出Logo了。大家把代码库中存有的

使用 SVG 输出 Octicon

2016/03/18 · HTML5 · SVG

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

  • Justineo]()   

永利皇宫463手机版,GitHub.com 今后不再动用字体来输出Logo了。大家把代码库中存有的 Octicon 替换来了 SVG 版本。固然那些更动并不那么分明,但您当时就能够体会到 SVG Logo的长处。

永利皇宫463手机版 1

Octicon 上的自己检查自纠

切换成 SVG 现在,Logo会作为图片渲染而非文字,那使其在别的分辨率下都能很好地在各样像素值下显得。能够相比一下右侧放大后的字体版本和右臂清晰的 SVG 版本。

译自:Delivering Octicons with SVG

何以选用 SVG?

译者:张万程[译]Github是哪些选用SVG制作Logo的

Logo字体渲染难点

Logo字体一直只是一种 hack。咱们后面使用二个自定义字体,并将Logo作为 Unicode 符号。那样Logo字体就能够透过包装后的 CSS 来引进。只要简单地在任性成分上增添三个class,Logo就足以显得出来。然后我们只行使 CSS 就会即时改换Logo的尺码和颜料了。

糟糕的是,尽管这个Logo是矢量图形,但在 1x 显示器下的渲染效果并不理想。在依赖 WebKit的浏览器下,Logo或者会在好几窗口宽度下变得模糊。因为那时候Logo是用作文本输出的,本来用于抓牢文书可读性的次像素渲染本领反而使Logo看起来不好多数。

GitHub.com不再通过Logo字体达成Logo集。替代它,咱们曾在具备代码库中用SVG替换Octicons。这几个转换入眼发生在尾部,你会马上感受到SVGLogo带来的收益。

对页面渲染的精雕细琢

因为大家一向将 SVG 注入 HTML(那也是大家选择这种情势更加大的缘由),所以不再会并发Logo字体下载、缓存、渲染进程中出现的体裁闪动。

永利皇宫463手机版 2页面闪动

永利皇宫463手机版 3

可访问性

就像在《Logo字体已死》一文中所述,某个用户会覆盖掉 GitHub 的字体。对于患有读写障碍的用户,某个特定字体是更为轻易阅读的。对于修改字体的客户来讲,大家依据字体的Logo就被渲染成了空白方框。这搞乱了 GitHub 页面布局,而且也不提供别的消息。而不管字体覆盖与否,SVG 都足以不荒谬突显。对于读屏器顾客来讲,SVG 能让大家选取是读出 alt 属性还是一贯完全跳过。

选择SVG渲染的图像来替换文本类型的Logo,使得我们的Logo集在任何分辨率下都得以维持高水平的全像素值。上边图片是三个对待,左边是是加大的书体Logo,左边是清楚的SVGLogo。

图形尺寸更得当

咱俩最近对各样Logo在富有尺寸下提供单纯的图样。因为站点的加载重视了Logo字体的下载,我们曾被迫把Logo集限制在最重要的 16px 尺寸下。那让各样符号在视觉上做出一些投降,因为我们是指向 16px 方格实行优化的。当在新页面或经营发卖页上缩放那么些Logo时,展现的依然 16px 的本子。而 SVG 能够平价地 fork 全体的Logo集,在大家钦命的各种尺寸提供更确切的图形。当然对Logo字体也可以那样做,但如此客商须要下载两倍的数据量,恐怕更加多。

为啥使用SVG

实惠创作

打包自定义字体是纵横交叉的。一些 web 应用由此而生,我们之中也要好搞了一个。而用 SVG 的话,加多三个新Logo会变得像把二个 SVG 文件拖入四个索引那样轻易。

Logo字体渲染难点

可增添动画成效

绝不必然要加动画,而是有了丰硕动画的可能性。並且 SVG 动画也真正在诸如预加载动画等地点有实在使用。

Icon字体始终是一种侵入式做法。大家初期使用unicode符号自定义大家的Logo。这样能够将大家的Logo和CSS捆绑。任何因素只需求轻易地加上二个class就足以显示Logo。实际不是大家只供给修改CSS就足以同步调节Logo的轻重缓急和颜色。

怎么样贯彻

Octicon 在漫天 GitHub 的代码库中冒出了约 2500 次。在用 SVG 以前,我们差不离地用 `` 那样回顾的价签来引进。要切换成SVG,大家先给增加了一个用来往 HTML 内直接注入 SVG 路线的 Rails helper。我们先用那些 helper 让职工测验了不一样的 SVG 输出方式,然后才对外祖父布。

不佳地是,尽管那些Logo是矢量图形,他们平时只好渲染效率应比较差的1x显得。使用基于Webkit的浏览器,根据窗口宽度差别你会看出有个别歪曲的Logo。大家的Logo是使用文本,那表示亚像素渲染能够立异易读性,但那却让大家的Logo看起来相当差。

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 图标的措施,个中多少是因为遭逢 GitHub 生产条件的限定而败诉了。

  1. 表面 .svg 文件——最起首大家品尝提供贰个十足的外界“SVG 货仓”,然后用 <use> 成分来引进 SVG 拼图中的单个图形。在我们当前的跨域安全战略和能源管道条件下,提供在外表提供 SVG 拼图很难做到。
  2. SVG 背景——这种措施不可能实时调解Logo的颜色。
  3. 用 <img> 与 src 属性来引进 SVG——这种格局无法实时调度Logo的颜色。
  4. 将“SVG 旅社”整个嵌入到种种视图,然后利用 <use> ——把各种 SVG 都停放到方方面面 GitHub.com 的种种单页想想就狼狈,特别是一时候那几个页面多个Logo都没用到。

是因为我们的SVG是直接流入标志( 那也是我们怎么在一个点采用这种方案的重中之重缘由 ),因为Logo字体已经下载,缓存和渲染,大家看来的不再是贰个非样式化内容

性能

在切换成 SVG 今后,大家还没发现页面加载和性质上有任何不良影响。大家前面曾估摸渲染时间会小幅减退,但往往品质和人的感知更相关。由于 SVG Logo被渲染为了钦定宽高的图像,页面也不再会像在此之前那么闪动了。

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

永利皇宫463手机版 4永利皇宫463手机版 5

劣点和坑

  • Firefox 对 SVG 仍旧有像素值计算的主题素材,即使Logo字体也是有同样的主题材料。
  • 假若您须求 SVG 有背景象,你大概供给在外侧包一层额外的 div。
  • 出于 SVG 是作为图片提供的,某个 CSS 的遮蔽难点也急需再行考虑衡量。借让你看看大家的页面布局有其它意外的地点,请告知。
  • IE 浏览器下,必要对 svg 成分内定宽高属性,手艺平日突显大小。
  • 在技术方案升级历程中,大家层同不经常间输出 SVG 和Logo字体。在大家依旧为各类 SVG Logo钦赐 font-family 时会导致 IE 崩溃。在一点一滴转向 SVG 以后,那么些主题材料就化解了。

进步可访谈性

总结

透过换掉Logo字体,大家能更有益、更连忙、更有可访谈性地提供Logo了。并且它们看起来也更棒了。享受啊。

1 赞 2 收藏 评论

永利皇宫463手机版 6

就好像Death to Icon Fonts里的布局一样,一些客户覆盖了GitHub的书体。对于有阅读障碍的人,有个别字体难以鉴定分别。由于他们字体的改变,我们根据字体的Logo会被渲染成空方块。那个混乱的GitHub页面布局不能提供别的有意义的显得。SVG的显得不受字体覆盖的熏陶。对于荧屏阅读器,SVG为我们提供了应用alt键发音和关闭发音的意义。

字形尺寸合适

对此每三个Logo, 今后大家提供了一个字形的保有尺寸。因为大家网址的加载速度重视于大家字体Logo的下载,大家被迫限制Logo集使用必备的16像素大小。因为我们为16像素互连网做了优化,导致在每三个标记的视觉效果上被迫做出迁就。当大家在blankslates和市镇经营出售页面缩放大家的Logo时,大家仍然采纳16像素的Logo突显。使用SVG,大家得以很轻便地复制整套Logo集而且能够钦赐别的尺寸,提供更方便的字形。大家也能够应用大家的Logo字体做一样的事情,但大家的顾客须要下载两倍的数额下载量,以致越来越大。

轻巧创作

创造自定义字体是一件很累的干活。已经面世部分web应用能够解决这种伤痛。在其间大家创造了作者们自个儿的个体育工作具。使用SVG创制贰个新的Logo仿佛拖拽一个SVG到多个文书夹一下便于。

能够增加动画效率

尽管如此没说要做,但大家确实能够做,就算SVG动画确实有一部分实际上选拔的预加载动画,如 preloader animations

怎么做

我们的Octicons在GitHub代码Curry冒出了相近2500次。与SVG比较,Octicons能够蕴含在一个简约的span里 。切换来SVG,我们第一增加贰个Rails Helper用来将SVG path直接流入大家的暗号。得益于大家的Helper,在正式颁发前大家得以测量检验SVG的种种方法。和SVG共同利用是两个比较好的艺术,假如由于种种缘由,大家要求回滚到图标字体,我们只需修改Helper的输出。

Helper的用法

输入

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

输出

永利皇宫463手机版 7

我们的艺术

你能够看出大家应用直接流入的主意将SVG直接注入到页面标识中。所以我们能够在一齐情形下通过CSS的fill: 阐明,很利索地修改Logo颜色,

与Logo字体差别,大家前天有贰个SVG目录,依照所选取的图纸大家的helper能够将SVG的path直接注入到标识。尽管大家需求贰个警示图标,大家调用helper <%= octicon(:symbol => "alert") %>。它会找出同名文件并流入SVG。

为了将SVGLogo加多到大家的页面,大家尝试了广大方案,由于GigHub生产条件的限制,一些方案是行不通的死胡同。

  1. External .svg — 大家率先尝试提供三个简便的外表“svgstore” 。大家满含叁个单独的元素.由于我们当前的跨域战略和生产线,大家开掘很难提供外界SVG。

  2. SVG背景图片 — 这种方案不可能同步修改大家的Logo颜色。

  3. 通过img和src属性链接SVG — 这种方案不能够同步修改大家的Logo颜色。

  4. 使用在每一个视图中放到整个“svgstore” — 让GitHub.com的每一种页面都包含全数SVG图形令人以为很不爽,非常是三个页面不仅唯有叁个图标的情景。

性能

我们开采切换成SVG后,页面加载和本性未有受到震慑。咱们曾希望在渲染时间上有越来越大开间的下滑,但品质平常受各类要素影响。因为SVGLogo在页面中的渲染是和和图表一样基于钦赐的上升的幅度和可观,页面还不能够相近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应用于每五个SVGLogo时会招致IE崩溃。在联网到全SVG后那个主题材料获得了深透消除。

总结

丢弃图标字体后,大家提供的svgLogo更易用,更便捷,可访问性越来越好。他们看起来也更棒。好开森。

更加的多优质译文

编辑:关于计算机 本文来源:Github是何等利用SVG制作Logo的

关键词: