浓厚浅析HTML5中的SVG,使用SVG中的Symbol元素制作Icon

使用 SVG 输出 Octicon

2016/03/18 · HTML5 ·
SVG

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

  • Justineo]()   

GitHub.com 现在不再接纳字体来输出图标了。大家把代码库中具备的 Octicon
替换成了 SVG 版本。就算那一个改动并不那么通晓,但你登时就能体会到 SVG
图标的独到之处。

美高梅开户网址 1

Octicon 上的冲突统一

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

译自:Delivering Octicons with
SVG

前言

乘胜大屏幕分辨率的推广以及各个活动装备屡见不鲜的位移网络时代的过来,大家在网站设计时更应该关注内容在各个装备上的阅读性和显示效果。大家都愿意能在其他时刻,任何设施上都能通晓的,高效的传递新闻给用户。

而随着各样高清视网膜显示器的产出,现在web设计也急需考虑种种高清屏幕的来得效果,同样前端在代码完成的时候也亟需按照屏幕的不等来输出分化分辨率的图样。为了使大家的网页可以适配视网膜显示器上的高分辨率,在前端开发中貌似须要预备两套差异尺寸的图纸来答复,一套在平日屏幕上显示;一套在高清显示屏上显得。

为了化解屏幕分辨率对图标影响的题目,字体图标即icon
font顺势而生。字体图标是一种崭新的设计艺术。更尊敬的是相对而言图片而言,使用字体来打造图标可以不受于显示器分辨率的影响,那对于今日各类分辨率屏幕的活动互连网时代,比起用图片来说的确有很大的优势。所以现在在web开发中,使用字体来制作icon应用的也进一步多。

难道说大家只有这一种选用么?No,追根溯源,其实字体图标也是一种基于矢量图形的一种技术封装而已。那篇小说大家就来探视使用正宗的矢量图形SVG来创设icon的采纳,看过未来相信你会有一种“拈花微笑,飞叶伤人”的觉得。

深远浅析HTML5中的SVG,长远浅析HTML5SVG

SVG是Scalable Vector
Graphics的缩写,意为可缩放矢量图形。1998年,万维网联盟创设了一个工作组,研发一种通过XML来表现矢量图形的技艺——SVG!由于SVG也是一种XML文件,所以SVG也继承了XML的开放性、可移植性和交互性的助益,本文介绍html5中svg,必要的情侣参考下

SVG 背景

SVG是Scalable Vector
Graphics的缩写,意为可缩放矢量图形。1998年,万维网联盟成立了一个工作组,研发一种通过XML来突显矢量图形的技术——SVG!由于SVG也是一种XML文件,所以SVG也三番五次了XML的开放性、可移植性和交互性的独到之处。近日大致所有主流的浏览器都协助SVG,大家可以从
那里 获得越多的万分音讯,其中囊括:

应用<embed>或者<object>元一贯突显基本的SVG图形;
使用<img>来显示SVG图形;
将SVG图形应用为CSS背景图;
直接在HTML文档中采用<svg>标签(需求HTML5协理);
对采纳CSS或者外部对象元素的HTML元素使用SVG变换、滤镜等特效;
对SVG对象使用类似photoshop的成效,蕴涵模糊和色彩处理;
对SVG图像使用动画片;
利用SVG格式的字体;

* SVG
* 基本内容
* SVG并不属于HTML5专有内容
* HTML5提供关于SVG原生的始末
* 在HTML5并发从前,就有SVG内容
* SVG,不难的话就是矢量图
* SVG文件的扩展名为”.svg”
* SVG使用的是XML语法
* 概念
* SVG是一种选用XML技术描述二维图形的言语
* SVG的特点
* SVG绘制图形可以被搜寻引擎抓取
* SVG在图纸质量不下滑的场地下,被放大
* SVG与Canvas的区别
* SVG
* 不依赖分辨率
* 支持事件绑定
* 大型渲染区域的先后(例如百度地图)
* 不能用来达成网页游戏
* Canvas
* 信赖分辨率
* 不辅助事件绑定
* 最合适网页游戏
* 保存为”.jpg”格式的图样
* 用途
* 网页中一些小的图标
* 网页中动态特效(动画效果)
* HTML5中使用SVG
* 使用<svg></svg>元素
* 作用 – 类似于<canvas>元素
* 默许大小为300px*150px
* 使用CSS样式
* 使用SVG绘制图形,必须定义<svg>元素中
* 绘制图形
* 矩形元素

代码如下:
<rect x=”” y=”” width=”” height=”” />
<!DOCTYPE html>
<html>
浓厚浅析HTML5中的SVG,使用SVG中的Symbol元素制作Icon。<head>
<title>SVG绘制矩形</title>
<meta charset=”utf-8″ />
</head>
<body>
<!–
在HTML页面中接纳svg标签的话
* 定义<svg></svg>元素
* 类似于<canvas>元素的功力
* 默许大小 300px * 150px
* 设置宽度和冲天 – 属性和style
* 利用svg绘制所有图形,必须定义在<svg>元素内
* 利用svg绘制的图样是与HTML页面有关的
–>
<svg style=”background:pink;width:400px;height:400px;”>
<!–
制图矩形 – <rect />
* x和y – 绘制矩形的左上角坐标值
* width和height – 绘制矩形的肥瘦和中度
* 必须利用性质方式,无法动用style样式格局
* 默许颜色为红色
安装颜色 – 既可以动用性质,还足以选拔样式
* fill – 设置填充颜色
* stroke – 设置描边颜色
安装线条宽度
* stroke-width
注意
* svg绘制的图纸,使用style格局设置样式,使用的不是CSS属性,而是SVG属性
–>
<rect x=”10″ y=”10″ width=”100″ height=”100″ fill=”blue”
stroke=”black” stroke-width=”5″ />
<rect x=”120″ y=”10″ width=”100″ height=”100″
style=”fill:blue;stroke:black;stroke-width:5″ />
</svg>
</body>
</html>
* 圆形元素
<circle cx=”” cy=”” r=”” />
<body>
<svg width=”500px” height=”500px”>
<!–
制图圆形 – <circle>
* cx和cy – 圆形的圆形坐标值
* r – 圆形的半径
–>
<circle cx=”100″ cy=”100″ r=”100″ fill=”pink” />
</svg>
</body>
* 椭圆元素
<ellipse cx=”” cy=”” rx=”” ry=””>
<body>
<svg width=”300px” height=”300px”>
<ellipse cx=”150″ cy=”150″ rx=”150″ ry=”100″ />
</svg>
</body>
* 直线元素
<line x1=”” y1=”” x2=”” y2=”” />
<body>
<!–
<svg>元素中只能分包一个图纸元素,仍旧得以涵盖五个图形元素?
* 可以涵盖多少个图形元素
–>
<svg width=”300px” height=”300px”>
<line x1=”10″ y1=”10″ x2=”200″ y2=”200″ stroke-width=”10″
stroke=”black”/>
<line x1=”200″ y1=”200″ x2=”200″ y2=”10″ stroke-width=”10″
stroke=”black”/>
</svg>
</body>
* 折线元素
<polyline points=””>
<body>
<svg width=”500px” height=”500px”>
<!–
<polyline>元素 – 折线
* points – 设置起源、折点及终端
* x和y之间采取”,”分隔
* 三个点之间接纳空格分隔
折线的特征
* 默许将折线中的区域(起源到极点),默许提供红色
–>
<polyline points=”10,10 200,10 200,200 10,200 10,10″ stroke-width=”5″
stroke=”black” fill=”white”/>
</svg>
</body>
* 多边形元素
<polygon points=”” />
<body>
<svg width=”500px” height=”500px”>
<polyline points=”10,10 200,10 200,200 10,200 100,100 10,10″
stroke-width=”5″ stroke=”black” fill=”white”/>
</svg>
</body>
* 特效元素
* 渐变 – 渐变元素定义在<defs>元素内
* 线型渐变 – <linearGradient>
* 该因素是初阶元素
<linearGradient x1=”%” y1=”%” x2=”%” y2=”%”>
<stop offset=”%” stop-color=”color” />
</linearGradient>
<body>
<svg width=”400px” height=”400px”>
<美高梅开户网址 ,!–
设置线型渐变 – <linearGradient>
* 用法 – 将渐变定义在<defs>元素中
* 特点 – 具有基准线
* 起点坐标值 – x1和y1
* 终点坐标值 – x2和y2
* 注意
* 该因素是起初元素
<linearGradient></linearGradient>
* x1和y1、x2和y2的值都是百分值
* 定义id属性
* 用于将设置的渐变添加到绘制的图片元素中
* 使用<stop>元素 – 设置渐变的水彩
* offset – 设置渐变颜色的义务
* 该值也是百分值
* stop-color – 设置渐变颜色
* stop-opacity – 设置渐变颜色的透明度
–>
<defs>
<linearGradient id=”mygrd” x1=”0″ y1=”0″ x2=”100%” y2=”100%”>
<stop offset=”0″ stop-color=”red” />
<stop offset=”50%” stop-color=”green” />
<stop offset=”100%” stop-color=”blue” />
</linearGradient>
</defs>
<!–
何以得以将地点安装线型渐变,添加在上边的矩形中?
* 使用fill属性,值为url(#渐变元素的id值)
–>
<rect x=”0″ y=”0″ width=”400″ height=”400″ fill=”url(#mygrd)”
/>
</svg>
</body>

* 扇形(射线)渐变 – <radialGradient>
* 滤镜 – 高斯模糊
* 滤镜使用<filter>元素
* <feGaussianBlur>元素 – 高斯模糊
* in=”SourceGraphic”
* stdDeviation – 设置模糊程度

代码如下:
<body>
<svg width=”500px” height=”500px”>
<!–
如何设置高斯模糊滤镜
* 定义<defs></defs>元素 – 滤镜定义在该因素中
* 定义<filter></filter>元素 – 表示SVG的滤镜
* 定义高斯歪曲元素<feGaussianBlur>
* 属性
* in=”SourceGraphic” – 固定写法
* stdDeviation – 设置模糊程度
* 为<filter>元素定义id属性值
* 方便添加在绘制图形的要素中
–>
<defs>
<filter id=”myfilter”>
<feGaussianBlur in=”SourceGraphic” stdDeviation=5 />
</filter>
</defs>
<!–
怎么将地点的高斯模糊与下部的因素举办关联
* 使用filter属性,值为url(#id)
* 设置当前图形的滤镜
–>
<rect x=”100″ y=”100″ width=”100″ height=”100″
filter=”url(#myfilter)” fill=”green” />
</svg>
</body>

* 注意 – 定义在<defs>元素中
* TWO.js
* 基本内容
* JS库介绍
* three.js – 专门用来绘制三维图形
* two.js – 专门用来绘制二维图形
* two.js帮衬的格式
* SVG – 默认
* Canvas
* WebGL – 专门用于绘制图像
* 怎样运用two.js
* 在HTML页面中引入two.js文件
* 在HTML页面中定义容器(<div>)
* 在javascript代码中
* 获取HTML页面中的容器
* 创造Two对象,将该对象添加到容器中
new Two(params).appendTo(Element);
* 使用two.js提供的API方法开展绘图
* 利用two.js提供的法子,设置图形
* 利用update()方法开展绘图
* 创建Two对象
* 构造器 – new Two(params)
* params参数 – 设置当前目的的音讯
* type – 设置当前应用的格式(Two.Types.svg)
* svg – 默认值
* canvas
* webgl
* width和height – 设置宽度和中度
* fullscreen – 设置是还是不是全屏
* Boolean值,true表示全屏
* 图形方法
* makeLine() – 绘制线条
* makeRectangle() – 绘制矩形
* makeCircle() – 绘制圆形
* makeEllipse() – 绘制椭圆
* 动画艺术
* update() – 更新动画
* play() – 添加动画片(循环)
* pause() – 删除动画
* 设置绘制图形的体裁
* 调用Two对象的绘图方法绘制图形时,重临该图形对象
* 通过该图形对象,设置相关属性值
* 分组操作
* Two.Group
* 动画效能
* bind(event,callback)方法 – 事件绑定
* event – 绑定事件名称
* update – 对应update()方法的功能
* 所有的DOM事件都可以绑定
* callback – 事件处理函数
* 增添内容
* 前端开发工具
* Aptana Studio 3 – 代码提醒
* Webstrom – 国内前端开发人士神器
* 实际付出中
* 多用SVG
* 不失真
* 可被搜寻
* 页面优化 – 收缩外部链接
* <a href=””>
* <img src=””>
* Canvas – HTML绘制图形
* 实际运行中,是以图片方式面世(.png)
* 不可能被寻找引擎抓取
* 放大后失真
* SVG内容
* 内容量极度大
* 静态绘制图形
* 动态动画效率
* 专门提供事件
* 网上有关SVG的素材很少(没有书籍)
* SVG的规范(W3C英文)
* SVG或CANVAS在HTML页面中定义
* 是只好定义一个要素,仍是可以定义四个元素?
* 在一个HTML页面可以定义四个<svg>或<canvas>元素
* SVG依旧CANVAS都是允许同时定义(绘制)七个图形
* 在实质上成本中的使用
* SVG在今天的干活付出,使用率并不高
* SVG图片一般都是由UI设计师来完结
* SVG尽管是我们友好来规划(绘制)
* 近年来网络上诸多特意提供现成的SVG图片的网站
* 使用JS库

————————————————————————————>为了生存而更改,为了改变而创制.

SVG是Scalable Vector
Graphics的缩写,意为可缩放矢量图形。1998年,万维网联盟创造了一个工作组,研发一…

为何选取 SVG?

译者:张万程[译]Github是怎么着行使SVG制作图标的

SVG优势

乘胜高清显示屏的推广,比较使用png等位图而言,使用SVG等矢量图形是一种全新的规划方法。更器重的是相比位图而言,SVG有着无可比拟的优势。那里我总括一下SVG具体的有些优势:

  1. SVG是矢量图形文件,可以自由改变大小,而不影响图标质量。
  2. 可以用CSS样式来自由定义图标颜色,比如颜色/尺寸等作用。

  3. 持有的SVG可以整个在一个文书中,节省HTTP请求 。

  4. 采用SMIL、CSS或者是javascript可以创设充满智慧的竞相动画效果。

  5. 由于SVG也是一种XML节点的文件,所以可以行使gzip的章程把公文减弱到很小。

中间使用SVG来创设动画更是让人憧憬,由于SVG是一连串似DOM节点组成的文本文档,所以大家得以很精密的操纵SVG图形的每一个部分,并且可以动用CSS3仍然是javascript来打造动画效果。上面大家就来看一个采纳SVG制作的动画片,如下图所示:

美高梅开户网址 2

想看它在web上的真人真事效果么,请扫描上边的二维码:

美高梅开户网址 3

 

千帆竞发以前,可以先下载基本的html和svg代码,下载地址

图标字体渲染难点

图标字体一直只是一种 hack。我们前边运用一个自定义字体,并将图标作为
Unicode 符号。那样图标字体就足以经过包装后的 CSS
来引入。只要不难地在任意元素上添加一个
class,图标就足以突显出来。然后我们只利用 CSS
就能即时改变图标的尺码和颜色了。

噩运的是,纵然那些图标是矢量图形,但在 1x
显示器下的渲染效果并不非凡。在按照 WebKit的浏览器下,图标可能会在一些窗口宽度下变得模糊。因为这时图标是作为文本输出的,本来用于抓牢文书可读性的次像素渲染技术反而使图标看起来不好许多。

GitHub.com不再通过图标字体完结图标集。取而代之,大家早就在装有代码库中用SVG替换Octicons。这么些变化重点暴发在底层,你会立刻感受到SVG图标带来的益处。

运用方法

在web开发中,SVG主要有上边三种选择方法:

  1. 采纳img和object标签直接引用svg。这种方式的欠缺主要在于需要每个图标都单身保存成一个SVG文件,使用时也是独立请求的,扩展了HTTP请求。
  2. Inline SVG,直接把SVG写入 HTML
    中,那种艺术简便直接,而且具有万分好的可调性。Inline SVG
    作为HTML文档的一部分,不需求独自请求。临时要求修改某个图标的形态也正如方便。然而Inline
    SVG使用上比较麻烦,需要在页面中插入一大块SVG代码不吻合手写,图标复用起来也相比较费心。
  3. SVG
    百事可乐。那里所说的Sprite技术,没错,类似于CSS中的Pepsi-Cola技术。图标图形组成在同步,实际显示的时候准确突显特定图标。其实基础的SVG
    Pepsi-Cola也只是将原来的位图改成了SVG而已。
  4.  最后就是本文的顶梁柱啦。使用svg中的<symbol>元平昔制作icon。

现在,大家根本介绍的是选用svg中的<symbol>元平昔制作icon,在地点说到的SVG
七喜中,大家须要使用相对地点来支配哪个图标被出示出来,可是SVG本身的概念是同意你可以运用<use>的方法一直引用SVG中的某一部分。

那就是说<symbol>元素是何等吗?按字面意思的话是符号的意思,假诺把一个SVG文件比喻成一个书柜的话,那么<symbol>则就意味着书柜中一书本分化品种的书本。那一个一本本不相同档次的图书就是大家要运用的<symbol>图标。

下边的代码就是将几个SVG图标整合成一个SVG文件从此的旗帜,可以见见代码中有两样种类的<symbol>元素,它们就是我们要引用的图标:

美高梅开户网址 4
各样Symbol设置一个id作为引用时的名字。使用id引用这一个SVG中的Icon有两种艺术。

率先种,将上述SVG作为body的第二个元素插入在HTML中, 此后,在需求展示某个
Icon 的地方插入上面的代码即可:

美高梅开户网址 5

第二种是,是利用完整路径引用Icon。 也就是:

美高梅开户网址 6

那种方式不要求像Pepsi-Cola那样繁琐的装置图片的移动。使用id命名图标并动用时直接选用id引用既直观又简单。

对页面渲染的革新

因为大家平素将 SVG 注入
HTML(那也是大家选拔那种方式更大的因由),所以不再会并发图标字体下载、缓存、渲染进程中出现的体裁闪动。

美高梅开户网址 7页面闪动

美高梅开户网址 8

自动化合并工具

标题来啦,假如赶上很多的图标,难道大家都要手动去联合为一个SVG吗?当然绝不。

此地介绍一个专门用于拍卖SVG
Symbols用的glup插件gulp-svg-symbols。

上面大家就来以一个实例一步一步来选择下这一个插件。

第一新建一个文件夹,目录结构如下图所示:

美高梅开户网址 9

svg文件夹是用来存放在svg格式文件的。

当然首先是你得有glup环境,至于glup环境的装置那里就不再讲演了,详细的设置使用教程可以去那篇文章看看。

下一场在你的品种目录下运作上面的下令安装插件:

美高梅开户网址 10

最终在您的系列目录新建一个**gulpfile.js**文本,写入上面的代码:

美高梅开户网址 11

ok。基本的条件搭好啊,正所谓,巧妇难为无米之炊。上哪找svg图标去吗?
那里推荐去icomoon.io 那几个专门提供矢量图标网站下载矢量图像,主要的是它提供SVG格式的图形下载。

咱俩那边就以icomoon.io为例,首先是点击你必要下载的图样,选中它,然后点击下载按钮:

美高梅开户网址 12

点击下载svg:

美高梅开户网址 13

然后按照大家地点的安插文件,大家把下载好的svg图标放到svg文件夹中。

整整准备妥当,在你的花色目录中,运行gulp sprites命令:

美高梅开户网址 14

运作命令之后,它会在您的目录中生成一个svg文件,用你常用的代码编辑器打开svg文件,可以见见svg图标都被联合到一个文本中。并且依照对应SVG文件的名称变更了ID,如下图所示:

美高梅开户网址 15

那怎么采纳啊它们啊?直接在html文件中使用,并且可以直接利用css来定义宽高、填充颜色等属性。如下代码所示:

美高梅开户网址 16

唯独出于浏览器安全策略限制的来头,大家不可以在地头一向打开html文件来预览我们引用的svg文件,要求以服务器的花样来打开,用gulp也很简单搞定一个简练的服务器环境。首先我们须求设置gulp-connect这么些模块,运行上面的授命:

美高梅开户网址 17

下一场修改下gulpfile.js文件中的配置项:

美高梅开户网址 18

运作gulp
webserver命令,打开localhost:8080,就可以看到我们引入的svg图标了:

美高梅开户网址 19

 

源代码下载

为了更能直接浮现应用SVG来作为图形格式的优势,我分别把地点的七个图标放大到十种不等的尺码,具体结果请不加思索拿起你的无绳电话机,扫描下边的二维码。会发现依旧清晰可知:

美高梅开户网址 20

可访问性

就像在《图标字体已死》一文中所述,有些用户会覆盖掉
GitHub
的书体。对于患有读写障碍的用户,某些特定字体是更进一步不难阅读的。对于修改字体的用户来说,我们按照字体的图标就被渲染成了空白方框。那搞乱了
GitHub 页面布局,而且也不提供任何音信。而不管字体覆盖与否,SVG
都足以正常突显。对于读屏器用户来说,SVG
能让大家选用是读出 alt 属性照旧一向完全跳过。

行使SVG渲染的图像来替换文本类型的图标,使得大家的图标集在任何分辨率下都得以维持高品质的全像素值。上面图片是一个比较,左边是是推广的字体图标,左侧是清楚的SVG图标。

总结

综述,使用SVG
Symbols的艺术来制作图标比使用字体图标有着无可比拟的优势。更要紧的是SVG中的每一个path元素都可以单独主宰,那可以给大家带来什么样呢?点击上边的图片你就明白使用SVG来创制图纸元素带来的魅力啦。

美高梅开户网址 21

自家觉的在活动端完全能够推广使用了,主流的安卓和苹果的浏览器都协助SVG。

图表尺寸更适用

我们脚下对每个图标在有着尺寸下提供单纯的图片。因为站点的加载看重了图标字体的下载,我们曾被迫把图标集限制在最主要的
16px 尺寸下。那让各样符号在视觉上做出一些息争,因为大家是指向 16px
方格举行优化的。当在新页面或营销页上缩放这一个图标时,展现的仍旧 16px
的版本。而 SVG 可以便宜地 fork
全部的图标集,在大家指定的每个尺寸提供更适用的图片。当然对图标字体也得以这么做,但诸如此类用户需要下载两倍的数据量,可能更多。

干什么拔取SVG

参照小说:

Gulp as a Development Web
Server
SVG symbol a Good Choice for
Icons
Inline SVG vs Icon Fonts
replace-icon-fonts-with-svg

 

初稿出处: 腾讯ISUX   

有利于创作

打包自定义字体是犬牙相制的。一些 web
应用因而而生,我们内部也要好搞了一个。而用 SVG
的话,添加一个新图标会变得像把一个 SVG 文件拖入一个索引那样轻而易举。

图标字体渲染难题

可添加动画效率

毫无一定要加动画,而是有了增加动画的可能性。而且 SVG
动画也确确实实在诸如预加载动画等地点有实在使用。

Icon字体始终是一种侵入式做法。大家早期使用unicode符号自定义咱们的图标。那样可以将大家的图标和CSS捆绑。任何因素只需要简单地抬高一个class就可以突显图标。并非大家只须要修改CSS就足以一并调整图标的轻重缓急和颜料。

如何落成

Octicon 在所有 GitHub 的代码库中冒出了约 2500 次。在用 SVG
以前,我们简要地用 “ 那样简单的竹签来引入。要切换到SVG,大家先给添加了一个用来往 HTML 内直接流入 SVG 路径的 Rails
helper。大家先用那些 helper 让职工测试了差其余 SVG
输出格局,然后才对外宣布。

不好地是,即使这个图标是矢量图形,他们不时只可以渲染效能应较差的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>

可以改良页面渲染

我们的方案

可以望见,大家最后上线的方案是往页面 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
    的每个单页想想就难堪,尤其是有时候这些页面一个图标都没用到。

是因为我们的SVG是一向流入标记(
那也是大家为啥在一个点选拔那种方案的显要原因
),因为图标字体已经下载,缓存和渲染,我们看来的不再是一个非样式化内容

性能

在切换来 SVG
未来,大家还没发现页面加载和特性上有任何不良影响。大家以前曾估算渲染时间会大幅下滑,但屡次质量和人的感知更相关。由于
SVG
图标被渲染为了指定宽高的图像,页面也不再会像往日那样闪动了。

并且鉴于大家不再输出字体相关的 CSS,我们仍能干掉一部分结余的 CSS
代码。

美高梅开户网址 22

症结和坑

  • Firefox 对 SVG 仍旧有像素值总结的题材,尽管图标字体也有同一的题材。
  • 一经你须求 SVG 有背景观,你恐怕必要在外边包一层额外的 div。
  • 是因为 SVG 是用作图片提供的,某些 CSS
    的遮盖难题也要求再一次考量。假设您看到我们的页面布局有其余意外的地点,请报告。
  • IE 浏览器下,需要对 svg 元素指定宽高属性,才能健康展现大小。
  • 在技术方案升级历程中,大家层同时输出 SVG
    和图标字体。在我们依然为各样 SVG 图标指定 font-family 时会导致 IE
    崩溃。在完全转向 SVG 将来,这几个标题就解决了。

美高梅开户网址 23

总结

透过换掉图标字体,大家能更有益于、更快速、更有可访问性地提供图标了。而且它们看起来也更棒了。享受呢。

1 赞 2 收藏
评论

美高梅开户网址 24

抓好可访问性

就好像Death to Icon
Fonts里的布局一样,一些用户覆盖了GitHub的书体。对于有阅读障碍的人,有些字体难以辨认。由于她们字体的改动,大家依照字体的图标会被渲染成空方块。这几个混乱的GitHub页面布局不可以提供任何有含义的显示。SVG的突显不受字体覆盖的震慑。对于显示器阅读器,SVG为大家提供了利用alt键发音和倒闭发音的功效。

字形尺寸合适

对此每一个图标,
现在大家提供了一个字形的有所尺寸。因为我们网站的加载速度依赖于大家字体图标的下载,大家被迫限制图标集使用必备的16像素大小。因为我们为16像素互联网做了优化,导致在每一个符号的视觉效果上被迫做出和解。当大家在blankslates和市场营销页面缩放大家的图标时,大家如故使用16像素的图标显示。使用SVG,大家可以很简单地复制整套图标集并且可以指定其余尺寸,提供更方便的字形。大家也可以动用大家的图标字体做同样的事务,但我们的用户须要下载两倍的多少下载量,甚至更大。

简单创作

创造自定义字体是一件很累的劳作。已经冒出部分web应用可以化解那种伤痛。在内部我们创建了大家协调的私房工具。使用SVG创造一个新的图标似乎拖拽一个SVG到一个文书夹一下不难。

能够添加动画功能

即使没说要做,但我们的确可以做,即使SVG动画确实有一对实际上利用的预加载动画,如
preloader animations

怎么做

大家的Octicons在GitHub代码库里涌出了靠近2500次。与SVG比较,Octicons可以包含在一个概括的span里
。切换来SVG,大家第一添加一个Rails Helper用来将SVG
path直接注入大家的号子。得益于大家的Helper,在专业公告前我们得以测试SVG的各类法子。和SVG共同利用是一个比较好的法子,要是是因为各类缘由,我们须要回滚到图标字体,大家只需修改Helper的输出。

Helper的用法

输入

<%= octicon(:symbol => “plus”) %>

输出

美高梅开户网址 25

咱俩的章程

您可以观察我们运用间接流入的方式将SVG直接注入到页面标记中。所以我们可以在共同情形下通过CSS的fill:
注明,很灵活地修改图标颜色,

与图标字体分歧,我们明日有一个SVG目录,按照所采纳的图形大家的helper可以将SVG的path直接注入到标记。如果大家必要一个告诫图标,我们调用helper
<%= octicon(:symbol => “alert”) %>。它会寻找同名文件并流入SVG。

为了将SVG图标添加到大家的页面,大家品尝了累累方案,由于GigHub生产条件的限定,一些方案是不行的死胡同。

  1. External .svg — 我们第一尝试提供一个简短的外表“svgstore”
    。我们包罗一个单身的元素.由于我们脚下的跨域策略和生产线,大家发现很难提供外部SVG。

  2. SVG背景图片 — 那种方案不可以一起修改咱们的图标颜色。

  3. 透过img和src属性链接SVG —  那种方案不可能同步修改大家的图标颜色。

  4. 运用在各种视图中放置整个“svgstore”  —
    让GitHub.com的每个页面都含有所有SVG图形令人觉得很不爽,尤其是一个页面不仅有一个图标的事态。

性能

大家发现切换来SVG后,页面加载和质量没有面临震慑。大家曾希望在渲染时间上有更大开间的下挫,但品质平日受三种因素影响。因为SVG图标在页面中的渲染是和和图纸相同基于指定的增加率和可观,页面还不能够接近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应用于每一个SVG图标时会招致IE崩溃。在联网到全SVG后那么些标题取得了彻底解决。

总结

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

越多赏心悦目译文

发表评论

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

网站地图xml地图