来自 前端知识 2019-10-04 20:55 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

Github是什么利用SVG制作Logo的

使用 SVG 输出 Octicon

2016/03/18 · HTML5 · SVG

原来的文章出处: aaronshekey   译文出处:[百度EFE

  • Justineo]()   

GitHub.com 未来不再选取字体来输出Logo了。大家把代码库中负有的 Octicon 替换来了 SVG 版本。固然那么些改换并不那么显然,但您及时就能够体味到 SVG Logo的帮助和益处。

图片 1

Octicon 上的相比较

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

译自:Delivering Octicons with SVG

干什么选拔 SVG?

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

Logo字体渲染难题

Logo字体平昔只是一种 hack。我们从前运用一个自定义字体,并将图标作为 Unicode 符号。那样Logo字体就可以透过包装后的 CSS 来引进。只要简单地在任意元素上增加一个class,图标就能够呈现出来。然后大家只使用 CSS 就会即时改造Logo的尺码和颜料了。

不幸的是,即便这么些图标是矢量图形,但在 1x 显示屏下的渲染效果并不特出。在依据 WebKit的浏览器下,Logo大概会在某个窗口宽度下变得模糊。因为此时Logo是用作文本输出的,本来用于提升公文可读性的次像素渲染才干反而使Logo看起来不佳非常多。

GitHub.com不再通过Logo字体完成图标集。取而代之,咱们已经在全数代码库中用SVG替换Octicons。那几个调换根本爆发在底层,你会应声感受到SVGLogo带来的益处。

对页面渲染的革新

因为大家直接将 SVG 注入 HTML(那也是我们选取这种方法越来越大的案由),所以不再会现出Logo字体下载、缓存、渲染进程中冒出的样式闪动。

图片 2页面闪动

图片 3

可访问性

就像在《图标字体已死》一文中所述,有个别客商会覆盖掉 GitHub 的书体。对于患有读写障碍的顾客,某个特定字体是尤为便于阅读的。对于修改字体的客商来讲,大家依据字体的Logo就被渲染成了空白方框。那搞乱了 GitHub 页面布局,並且也不提供其余音讯。而不管字体覆盖与否,SVG 都能够健康显示。对于读屏器顾客来讲,SVG 能让大家选择是读出 alt 属性照旧直接完全跳过。

利用SVG渲染的图像来替换文本类型的Logo,使得大家的Logo集在别的分辨率下都足以保险高素质的全像素值。下边图片是二个比较,左侧是是加大的书体Logo,右侧是清楚的SVGLogo。

图片尺寸更相符

我们当前对种种Logo在颇有尺寸下提供单纯的图样。因为站点的加载依赖了Logo字体的下载,我们曾被迫把Logo集限制在最重大的 16px 尺寸下。那让各类符号在视觉上做出一些低头,因为我们是本着 16px 方格进行优化的。当在新页面或经营出卖页上缩放那个Logo时,彰显的依旧 16px 的本子。而 SVG 可以方便地 fork 全体的Logo集,在大家钦点的种种尺寸提供更切合的图样。当然对图标字体也足以那样做,但如此客商须求下载两倍的数据量,或者更加多。

缘何接纳SVG

低价创作

打包自定义字体是目不暇接的。一些 web 应用由此而生,我们中间也融洽搞了二个。而用 SVG 的话,增添一个新Logo会变得像把二个 SVG 文件拖入三个目录那样轻松。

Logo字体渲染难点

可增多动画作用

毫不必必要加动画,而是有了拉长动画的或然性。况兼 SVG 动画也确确实实在诸如预加载动画等地点有实在采取。

Icon字体始终是一种侵入式做法。大家最先使用unicode符号自定义大家的Logo。那样可以将我们的Logo和CSS捆绑。任何因素只需求简单地拉长三个class就能够显示图标。实际不是大家只供给修改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 的每一种单页想想就窘迫,特别是一时候这么些页面一个图标都没用到。

出于大家的SVG是直接流入标识( 那也是大家怎么在一个点采用这种方案的首要原因 ),因为Logo字体已经下载,缓存和渲染,大家来看的不再是一个非样式化内容

性能

在切换来 SVG 以往,大家还没发掘页面加载和性质上有任何不良影响。大家前面曾估算渲染时间会大幅度裁减,但每每品质和人的感知更相关。由于 SVG Logo被渲染为了钦命宽高的图像,页面也不再会像从前那样闪动了。

并且鉴于大家不再输出字体相关的 CSS,大家仍是能够干掉一部分剩下的 CSS 代码。

图片 4图片 5

缺欠和坑

  • Firefox 对 SVG 照旧有像素值总计的标题,纵然Logo字体也可能有同样的难题。
  • 万一您要求 SVG 有背景观,你可能要求在外场包一层额外的 div。
  • 出于 SVG 是作为图片提供的,某个 CSS 的覆盖难点也急需再行考虑衡量。借令你看见大家的页面布局有其余不测的地点,请告知。
  • IE 浏览器下,须求对 svg 成分钦点宽高属性,技艺符合规律展现大小。
  • 在本事方案进级历程中,大家层同临时间输出 SVG 和Logo字体。在我们照旧为各类 SVG Logo内定 font-family 时会导致 IE 崩溃。在一同转向 SVG 今后,这些难点就消除了。

抓实可访谈性

总结

通过换掉图标字体,大家能更低价、更加高速、更有可访问性地提供Logo了。并且它们看起来也更棒了。享受呢。

1 赞 2 收藏 评论

图片 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共同利用是三个相比较好的艺术,借使是因为各个原因,大家要求回滚到Logo字体,大家只需修改Helper的输出。

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:Github是什么利用SVG制作Logo的

关键词: