新浦京81707con > 首页 > Github是如何使用SVG制作图标的,深入浅析HTML5中的

原标题:Github是如何使用SVG制作图标的,深入浅析HTML5中的

浏览次数:154 时间:2019-05-02

总结

因而换掉Logo字体,大家能更方便人民群众、更火速、更有可访问性地提供Logo了。而且它们看起来也更棒了。享受吗。

1 赞 2 收藏 评论

图片 1

Logo字体渲染难点

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

SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。一九玖陆年,万维网结盟创设了三个专业组,研究开发一种通过XML来显示矢量图形的技巧——SVG!由于SVG也是1种XML文件,所以SVG也继续了XML的开放性、可移植性和交互性的长处,本文介绍html5中svg,须求的仇敌参考下

SVG 背景

SVG是Scalable Vector Graphics的缩写,意为可缩放矢量图形。一996年,万维网结盟创设了1个专业组,研究开发壹种通过XML来显现矢量图形的才具——SVG!由于SVG也是壹种XML文件,所以SVG也三番6次了XML的开放性、可移植性和交互性的亮点。方今大约具有主流的浏览器都帮助SVG,大家能够从 这里 获得越来越多的相称音信,当中包含:

利用<embed>或然<object>成分来展现基本的SVG图形;
使用<img>来显示SVG图形;
将SVG图形应用为CSS背景图;
向来在HTML文书档案中使用<svg>标签(须求HTML伍支撑);
对运用CSS大概外部对象成分的HTML成分使用SVG调换、滤镜等特效;
对SVG对象使用类似photoshop的功力,包含模糊和色彩管理;
对SVG图像使用动画片;
选用SVG格式的书体;

* SVG
* 基本内容
* SVG并不属于HTML5专有内容
* HTML五提供关于SVG原生的始末
* 在HTML五出现从前,就有SVG内容
* SVG,简单来说正是矢量图
* SVG文件的恢弘名称为".svg"
* SVG使用的是XML语法
* 概念
* SVG是1种采用XML才能描述2维图形的语言
* SVG的特点
* SVG绘制图形能够被搜索引擎抓取
* SVG在图片品质不下落的情状下,被加大
* SVG与Canvas的区别
* SVG
* 不信赖分辨率
* 支持事件绑定
* 大型渲染区域的次第(举例百度地图)
* 不能够用来促成网游
* Canvas
* 正视分辨率
* 不扶助事件绑定
* 最合适网络游戏
* 保存为".jpg"格式的图纸
* 用途
* 网页中有些小的Logo
* 网页中动态特效(动画效果)
* 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>成分中
* 特点 - 具备基准线
* 起源坐标值 - x一和y一
* 终点坐标值 - x2和y2
* 注意
* 该因素是发轫成分
<linearGradient></linearGradient>
* x一和y一、x2和y二的值都以百分值
* 定义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 - 专门用来绘制2维图形
* 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的缩写,意为可缩放矢量图形。一九九玖年,万维网联盟创建了1个工作组,研究开发1...

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>

动用SVG渲染的图像来替换文本类型的Logo,使得大家的Logo集在其它分辨率下都能够保持高水平的全像素值。上边图片是一个对照,左侧是是推广的书体Logo,右侧是明显的SVGLogo。

症结和坑

  • Firefox 对 SVG 依然有像素值计算的难题,尽管Logo字体也有雷同的主题材料。
  • 只要你必要 SVG 有背景观,你大概需求在外头包一层额外的 div。
  • 鉴于 SVG 是用作图片提供的,有个别 CSS 的遮盖难点也必要再一次考虑衡量。假如您看看我们的页面布局有其余意外的地方,请报告。
  • IE 浏览器下,须要对 svg 成分钦命宽高属性,工夫健康显示大小。
  • 在技能方案进级历程中,我们层同时输出 SVG 和图标字体。在我们依然为每种 SVG Logo钦赐 font-family 时会导致 IE 崩溃。在一点一滴转向 SVG 以往,这一个主题素材就一蹴即至了。

与Logo字体分裂,大家后天有3个SVG目录,依据所采用的图形大家的helper能够将SVG的path直接注入到标志。尽管大家必要1个告诫图标,大家调用helper <%= octicon(:symbol => "alert") %>。它会搜索同名文件并流入SVG。

有利于创作

卷入自定义字体是繁体的。一些 web 应用因而而生,大家当中也要好搞了一个。而用 SVG 的话,增加1个新Logo会变得像把一个 SVG 文件拖入二个目录那样稳操胜算。

舍弃图标字体后,我们提供的svgLogo更易用,更迅捷,可访问性更加好。他们看起来也更棒。好开森。

图表尺寸更适于

我们当前对种种Logo在富有尺寸下提供单纯的图纸。因为站点的加载注重了Logo字体的下载,大家曾被迫把Logo集限制在最要紧的 1陆px 尺寸下。这让每一个符号在视觉上做出一些投降,因为大家是本着 1陆px 方格举办优化的。当在新页面或经营发售页上缩放那些Logo时,呈现的照旧 1陆px 的本子。而 SVG 能够一本万利地 fork 全体的Logo集,在我们钦赐的各样尺寸提供更适于的图纸。当然对Logo字体也足以如此做,但那样用户供给下载两倍的数据量,可能越来越多。

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

性能

在切换到 SVG 未来,我们还没发掘页面加载和天性上有任何不良影响。大家事先曾预测渲染时间会大幅度下落,但屡屡质量和人的感知更相关。由于 SVG Logo被渲染为了内定宽高的图像,页面也不再会像此前那么闪动了。

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

咱俩的秘诀

使用 SVG 输出 Octicon

2016/03/18 · HTML5 · SVG

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

  • Justineo]()   

GitHub.com 今后不再接纳字体来输出Logo了。大家把代码库中有着的 Octicon 替换来了 SVG 版本。即使这几个改造并不那么分明,但您立时就能够体味到 SVG Logo的独到之处。

图片 2

Octicon 上的对待

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

Icon字体始终是1种侵入式做法。大家早期使用unicode符号自定义大家的Logo。那样能够将大家的Logo和CSS捆绑。任何因素只供给轻易地丰硕一个class就足以显得图标。并非大家只必要修改CSS就能够一同调解Logo的大大小小和颜色。

为啥采取 SVG?

轻便创作

对页面渲染的改良

因为我们一向将 SVG 注入 HTML(那也是大家选择那种方式更加大的原由),所以不再会并发Logo字体下载、缓存、渲染进度中出现的样式闪动。

图片 3页面闪动

能够创新页面渲染

可访问性

就像在《图标字体已死》一文中所述,有些用户会覆盖掉 GitHub 的字体。对于患有读写障碍的用户,有个别特定字体是越来越便于阅读的。对于修改字体的用户来讲,大家依照字体的Logo就被渲染成了空白方框。那搞乱了 GitHub 页面布局,而且也不提供别的消息。而不管字体覆盖与否,SVG 都足以健康彰显。对于读屏器用户来讲,SVG 能让大家选用是读出 alt 属性依然直接完全跳过。

GitHub.com不再通过Logo字体达成Logo集。取代他,大家曾经在享有代码库中用SVG替换Octicons。这几个变化器重爆发在底部,你会立刻感受到SVGLogo带来的益处。

可加多动画成效

无须必然要加动画,而是有了充足动画的大概。而且 SVG 动画也实在在比如预加载动画等位置有实际运用。

四、 为保障尺寸准确,IE须求明显钦点SVG的width和height属性

什么得以达成

Octicon 在整整 GitHub 的代码库中出现了约 2500 次。在用 SVG 从前,大家大致地用 `` 那样归纳的标签来引进。要切换成SVG,大家先给增加了三个用来往 HTML 内一贯注入 SVG 路线的 Rails helper。大家先用这几个 helper 让职工测试了不一样的 SVG 输出情势,然后才对外发布。

成立自定义字体是壹件很累的办事。已经冒出局地web应用能够消除那种伤痛。在中间大家成立了作者们友好的个人工具。使用SVG创设3个新的图标就好像拖拽3个SVG到2个文书夹一下轻松。

Logo字体渲染问题

Logo字体平昔只是壹种 hack。大家以前运用叁个自定义字体,并将Logo作为 Unicode 符号。那样Logo字体就足以因而包装后的 CSS 来引进。只要轻易地在放四成分上增加一个class,Logo就足以显得出来。然后我们只利用 CSS 就能够即时改变Logo的尺码和颜料了。

噩运的是,就算那几个Logo是矢量图形,但在 一x 显示器下的渲染效果并不地道。在根据 WebKit的浏览器下,Logo只怕会在某个窗口宽度下变得模糊。因为那时Logo是当做文本输出的,本来用于升高公文可读性的次像素渲染才具反而使Logo看起来不好大多。

对此每二个图标, 将来大家提供了三个字形的具备尺寸。因为咱们网址的加载速度正视于大家字体Logo的下载,大家被迫限制Logo集使用必备的1陆像素大小。因为大家为1陆像素网络做了优化,导致在每一个标识的视觉效果上被迫做出妥胁。当大家在blankslates和市场经营出售页面缩放大家的Logo时,大家照旧采取1六像素的Logo彰显。使用SVG,大家能够很轻松地复制整套Logo集并且能够钦定其余尺寸,提供更方便的字形。大家也得以动用大家的Logo字体做一样的职业,但大家的用户须求下载两倍的数目下载量,以至越来越大。

我们的方案

能够望见,我们最终上线的方案是往页面 HTML 中央直机关接注入 SVG。那样就足以灵活地实时调解 CSS 的 fill: 注解来修改颜色。

咱俩明日有一个 SVG 图形的目录而不是三个Logo字体,大家经过甄选,将中间这一个标识的门径用 helper 直接流入到 HTML 里。举例,通过 <%= octicon(:symbol => "alert") %> 来调用 helper 就可以的到3个告诫Logo。Helper 会查找同名的公文名,并且注入 SVG。

咱俩尝试过好三种在页面中增多 SVG Logo的措施,在那之中有个别是因为碰到 GitHub 生产条件的限量而败诉了。

  1. 外部 .svg 文件——最开始大家尝试提供3个单1的外表“SVG 仓库”,然后用 <use> 成分来引进 SVG 拼图中的单个图形。在大家眼下的跨域安全战略和财富管道条件下,提供在外表提供 SVG 拼图很难实现。
  2. SVG 背景——这种方法无法实时调度Logo的水彩。
  3. 用 <img> 与 src 属性来引进 SVG——那种格局不可能实时调节图标的水彩。
  4. 将“SVG 货仓”整个嵌入到种种视图,然后使用 <use> ——把各类 SVG 都置于到全部 GitHub.com 的种种单页想想就狼狈,特别是有时候那一个页面1个Logo都没用到。

能够增加动画功能

性能

本文由新浦京81707con发布于首页,转载请注明出处:Github是如何使用SVG制作图标的,深入浅析HTML5中的

关键词: 新浦京81707con HTML5 如何使用 图标 Github

上一篇:噪点与烟雾效果,炫丽的倒计时效果

下一篇:没有了