您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net使用SVG中的Symbol元素制作Icon,Github是

新葡亰496net使用SVG中的Symbol元素制作Icon,Github是

发布时间:2019-07-08 02:03编辑:新葡亰官网浏览(70)

    使用 SVG 输出 Octicon

    2016/03/18 · HTML5 · SVG

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

    • Justineo]()   

    GitHub.com 现在不再使用字体来输出图标了。我们把代码库中所有的 Octicon 替换成了 SVG 版本。虽然这些改动并不那么明显,但你马上就能体会到 SVG 图标的优点。

    新葡亰496net 1

    Octicon 上的对比

    切换到 SVG 以后,图标会作为图片渲染而非文字,这使其在任何分辨率下都能很好地在各种像素值下显示。可以比较一下左侧放大后的字体版本和右侧清晰的 SVG 版本。

    译自:Delivering Octicons with SVG

    深入浅析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>
    <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属性
    * 用于将设置的渐变添加到绘制的图形元素中
    *新葡亰496net, 使用<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年,万维网联盟成立了一个工作组,研发一...

    前言

    随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来,我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果。我们都希望能在任何时间,任何设备上都能清楚的,高效的传递信息给用户。

    而随着各种高清视网膜屏幕的出现,现在web设计也需要考虑各种高清屏幕的显示效果,同样前端在代码实现的时候也需要根据屏幕的不同来输出不同分辨率的图片。为了使我们的网页能够适配视网膜屏幕上的高分辨率,在前端开发中一般需要准备两套不同尺寸的图片来应对,一套在普通屏幕上显示;一套在高清屏幕上显示。

    为了解决屏幕分辨率对图标影响的问题,字体图标即icon font顺势而生。字体图标是一种全新的设计方式。更重要的是相比图片而言,使用字体来制作图标可以不受于屏幕分辨率的影响,这对于现在各种分辨率屏幕的移动互联网时代,比起用图片来说确实有很大的优势。所以现在在web开发中,使用字体来制作icon应用的也越来越多。

    难道我们只有这一种选择么?No,追根溯源,其实字体图标也是一种基于矢量图形的一种技术封装而已。这篇文章我们就来看看使用正宗的矢量图形SVG来制作icon的应用,看过之后相信你会有一种“拈花微笑,飞叶伤人”的感觉。

    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>元素
    新葡亰496net使用SVG中的Symbol元素制作Icon,Github是如何使用SVG制作图标的。         默认大小为300px 150px
      使用CSS样式
         使用SVG绘制图形,必须定义<svg>元素中
       绘制图形
         矩形元素
           <rect x="" y="" width="" height="" />
         圆形元素
           <circle cx="" cy="" r="" />
         椭圆元素
           <ellipse cx="" cy="" rx="" ry="">
         直线元素
           <line x1="" y1="" x2="" y2="" />
         折线元素
           <polyline points="">
         多边形元素
           <polygon points="" />
       特效元素
         渐变 - 渐变元素定义在<defs>元素内
           线型渐变 - <linearGradient>
             该元素是起始元素
      <linearGradient x1="%" y1="%" x2="%" y2="%">
        <stop offset="%" stop-color="color" />
      </linearGradient>
           扇形(射线)渐变 - <radialGradient>
         滤镜 - 高斯模糊
           滤镜使用<filter>元素
           <feGaussianBlur>元素 - 高斯模糊
             in="SourceGraphic"
      stdDeviation - 设置模糊程度
           注意 - 定义在<defs>元素中
      TWO.js
       基本内容
         JS库介绍
           three.js - 专门用于绘制三维图形
           two.js - 专门用于绘制二维图形
         two.js支持的格式
           SVG - 默认
           Canvas
    新葡亰496net使用SVG中的Symbol元素制作Icon,Github是如何使用SVG制作图标的。       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 - 事件处理函数

    为何使用 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制作的动画,如下图所示:

    新葡亰496net 2

    想看它在web上的真实效果么,请扫描下面的二维码:

    新葡亰496net 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。这里所说的Sprite技术,没错,类似于CSS中的Sprite技术。图标图形整合在一起,实际呈现的时候准确显示特定图标。其实基础的SVG Sprite也只是将原来的位图改成了SVG而已。
    4.  最后就是本文的主角啦。使用svg中的<symbol>元素来制作icon。

    现在,我们着重介绍的是使用svg中的<symbol>元素来制作icon,在上面说到的SVG Sprite中,我们需要使用相对位置来控制哪个图标被显示出来,但是SVG本身的定义是允许你可以使用<use>的方式直接引用SVG中的某一部分。

    那么<symbol>元素是什么呢?按字面意思的话是符号的意思,如果把一个SVG文件比喻成一个书柜的话,那么<symbol>则就表示书柜中一本本不同类别的书籍。这些一本本不同类别的书本就是我们要使用的<symbol>图标。

    下面的代码就是将多个SVG图标整合成一个SVG文件之后的样子,可以看到代码中有不同类别的<symbol>元素,它们就是我们要引用的图标:

    新葡亰496net 4
    每个Symbol设置一个id作为引用时的名字。使用id引用这个SVG中的Icon有两种方法。

    第一种,将上述SVG作为body的第一个元素插入在HTML中, 此后,在需要显示某个 Icon 的地方插入下面的代码即可:

    新葡亰496net 5

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

    新葡亰496net 6

    这种方法不需要像Sprite那样繁琐的设置图片的位移。使用id命名图标并使用时直接使用id引用既直观又简单。

    对页面渲染的改进

    因为我们直接将 SVG 注入 HTML(这也是我们选择这种方式更大的原因),所以不再会出现图标字体下载、缓存、渲染过程中出现的样式闪动。

    新葡亰496net 7页面闪动

    新葡亰496net 8

    自动化合并工具

    问题来啦,如果碰到很多的图标,难道我们都要手动去合并为一个SVG吗?当然不用。

    这里介绍一个专门用于处理SVG Symbols用的glup插件gulp-svg-symbols。

    下面我们就来以一个实例一步一步来使用下这个插件。

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

    新葡亰496net 9

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

    当然首先是你得有glup环境,至于glup环境的安装这里就不再阐述了,详细的安装使用教程可以去这篇文章看看。

    然后在你的项目目录下运行下面的命令安装插件:

    新葡亰496net 10

    最后在你的项目目录新建一个**gulpfile.js**文件,写入下面的代码:

    新葡亰496net 11

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

    我们这里就以icomoon.io为例,首先是点击你需要下载的图形,选中它,然后点击下载按钮:

    新葡亰496net 12

    点击下载svg:

    新葡亰496net 13

    然后按照我们上面的配置文件,我们把下载好的svg图标放到svg文件夹中。

    一切准备就绪,在你的项目目录中,运行gulp sprites命令:

    新葡亰496net 14

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

    新葡亰496net 15

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

    新葡亰496net 16

    不过由于浏览器安全策略限制的原因,我们不能在本地直接打开html文件来预览我们引用的svg文件,需要以服务器的形式来打开,用gulp也很容易搞定一个简单的服务器环境。首先我们需要安装gulp-connect这个模块,运行下面的命令:

    新葡亰496net 17

    然后修改下gulpfile.js文件中的配置项:

    新葡亰496net 18

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

    新葡亰496net 19

     

    源代码下载

    为了更能直接体现使用SVG来作为图形格式的优势,我分别把上面的三个图标放大到十种不同的尺寸,具体结果请毫不犹豫拿起你的手机,扫描下面的二维码。会发现依然清晰可见:

    新葡亰496net 20

    可访问性

    就像在《图标字体已死》一文中所述,有些用户会覆盖掉 GitHub 的字体。对于患有读写障碍的用户,某些特定字体是更加容易阅读的。对于修改字体的用户来说,我们基于字体的图标就被渲染成了空白方框。这搞乱了 GitHub 页面布局,而且也不提供任何信息。而不管字体覆盖与否,SVG 都可以正常显示。对于读屏器用户来说,SVG 能让我们选择是读出 alt 属性还是直接完全跳过。

    使用SVG渲染的图像来替换文本类型的图标,使得我们的图标集在任何分辨率下都可以保持高质量的全像素值。上面图片是一个对比,左边是是放大的字体图标,右边是清晰的SVG图标。

    总结

    综上所述,使用SVG Symbols的方式来制作图标比使用字体图标有着无可比拟的优势。更重要的是SVG中的每一个path元素都可以单独控制,这可以给我们带来什么呢?点击下面的图片你就知道使用SVG来制作图形元素带来的魅力啦。

    新葡亰496net 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 代码。

    新葡亰496net 22新葡亰496net 23

    缺点和坑

    • Firefox 对 SVG 仍然有像素值计算的问题,虽然图标字体也有相同的问题。
    • 如果你需要 SVG 有背景色,你可能需要在外面包一层额外的 div。
    • 由于 SVG 是作为图片提供的,某些 CSS 的覆盖问题也需要重新考量。如果你看到我们的页面布局有任何奇怪的地方,请告知。
    • IE 浏览器下,需要对 svg 元素指定宽高属性,才能正常显示大小。
    • 在技术方案升级过程中,我们层同时输出 SVG 和图标字体。在我们仍然为每个 SVG 图标指定 font-family 时会导致 IE 崩溃。在完全转用 SVG 以后,这个问题就解决了。

    提高可访问性

    总结

    通过换掉图标字体,我们能更方便、更快速、更有可访问性地提供图标了。而且它们看起来也更棒了。享受吧。

    1 赞 2 收藏 评论

    新葡亰496net 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") %>

    输出

    新葡亰496net 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图标更易用,更快速,可访问性更好。他们看起来也更棒。好开森。

    更多精彩译文

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net使用SVG中的Symbol元素制作Icon,Github是

    关键词: