深入浅析HTML5中的SVG,深入浅析HTML5SVG

使用 SVG 输出 Octicon

2016/03/18 · HTML5 ·
SVG

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

  • Justineo]()   

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

图片 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属性
* 用于将设置的渐变添加到绘制的图形元素中
* 使用<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制作图标的

图标字体渲染问题

图标字体从来只是一种 hack。我们之前使用一个自定义字体,并将图标作为
Unicode 符号。这样图标字体就可以通过打包后的 CSS
来引入。只要简单地在任意元素上添加一个
class,图标就可以显示出来。然后我们只使用 CSS
就能即时改变图标的尺寸和颜色了。

不幸的是,虽然这些图标是矢量图形,但在 1x
显示屏下的渲染效果并不理想。在基于 WebKit
的浏览器下,图标可能会在某些窗口宽度下变得模糊。因为此时图标是作为文本输出的,本来用于提高文本可读性的次像素渲染技术反而使图标看起来糟糕许多。

GitHub.com不再通过图标字体实现图标集。取而代之,我们已经在所有代码库中用SVG替换Octicons。这个变化主要发生在底层,你会立刻感受到SVG图标带来的好处。

对页面渲染的改进

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

图片 2页面闪动

图片 3

可访问性

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

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

图形尺寸更合适

我们目前对每个图标在所有尺寸下提供单一的图形。因为站点的加载依赖了图标字体的下载,我们曾被迫把图标集限制在最重要的
16px 尺寸下。这让每个符号在视觉上做出一些让步,因为我们是针对 16px
方格进行优化的。当在新页面或营销页上缩放这些图标时,显示的还是 16px
的版本。而 SVG 可以方便地 fork
全部的图标集,在我们指定的每个尺寸提供更合适的图形。当然对图标字体也可以这么做,但这样用户需要下载两倍的数据量,可能更多。

为什么使用SVG

便于创作

打包自定义字体是复杂的。一些 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
代码。

图片 4图片 5

缺点和坑

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

提高可访问性

总结

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

1 赞 2 收藏
评论

图片 6

就像Death to Icon
Fonts里的布局一样,一些用户覆盖了GitHub的字体。对于有阅读障碍的人,有些字体难以识别。由于他们字体的修改,我们基于字体的图标会被渲染成空方块。这些混乱的GitHub页面布局无法提供任何有意义的显示。SVG的显示不受字体覆盖的影响。对于屏幕阅读器,SVG为我们提供了使用alt键发音和关闭发音的功能。

字形尺寸合适

相关文章

发表评论

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

*
*
Website