svg矢量图在网页开发中应用的整理笔记

  • 内容
  • 评论
  • 相关

最近做移动端webapp的时候,总是遇到要将小图做成base64格式加载到html内,因为sketch可以导出svg格式,svg是矢量图,放大缩小不会丢失细节,不会变形,在retina屏上显示尤为清晰,最重要的是矢量文件大小非常小,所以想着用svg格式内嵌到css中,下面我归总了一些东西,也算学习的整理总结的吧。

矢量图格式有CGM,SVG,AI,CDR,PDF,SWF,VML等。
栅格图格式有JPEG/JPG,GIF,TIFF,PNG,BMP等。

矢量图像也称为面向对象的图像或绘图图像,矢量文件中的图形元素称为对象,每个对象都是一个自成一体的实体,它具有颜色、形状、轮廓、大小和屏幕位置等属性,在数学上定义为一系列由线连接的点,所以文件会比较小,同时也能提供高清晰的画面,适合于直接打印或输出。
栅格图图像的存储单位是图像上每一点的像素值,因此一般的图像文件都很大,会占用大量的网络带宽。

矢量图是根据几何特性来绘制图形,矢量可以是一个点或一条线,矢量图只能靠软件生成,文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合。它的特点是放大后图像不会失真,和分辨率无关,适用于图形设计、文字设计和一些标志设计、版式设计等。

SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述2D矢量图形的一种图形格式,其实它就是一个XML文件,所以每一个元素都可以绑定javascript事件处理器。

SVG优势:
SVG图形是使用数学公式创建的,需要在源文件中存储的数据要少得多,因为您无需存储每个独立像素的数据。
矢量图形可更好地缩放。对于网络上的图像,尝试从原始大小放大图像可能产生失真(或像素化的)图像。原始像素数据是针对特定大小进行设计的。当图像不再是该大小时,显示图像的程序会猜测使用何种数据来填充新的像素。矢量图像具有更高的弹性;当图像大小变化时,数据公式可相应地调整。
源文件大小可能更小,所以 SVG 图形比其他光栅图形的加载速度更快,使用的带宽更少。
SVG图像由浏览器渲染,可以以编程方式绘制。SVG 图像可动态地更改,这使它们尤其适合数据驱动的应用程序,比如图表。
矢量图是位图的源码,可通过文本编辑器来创建和修改,所以它既具有易于访问和搜索引擎友好特征。

SVG.js介绍
SVG.js是一个用于操作 SVG 和执行 SVG 动画的轻量级库,无任何依赖性
官网地址:http://svgjs.com/
github地址:https://github.com/svgdotjs/svg.js 
CDN地址:
https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js
https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js

Snap.svg介绍
Snap.svg.js是一个操纵 SVG 节点/制作 SVG 动画的框架,是一个可以使你操纵 SVG 资源和 jQuery 操作 DOM 一样简单的类库。
官网地址:http://snapsvg.io/
github地址:https://github.com/adobe-webplatform/Snap.svg
API地址:http://airbnb.io/lottie/

Lottie介绍
动画库Lottie是Airbnb公司出的,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形式在移动设备上渲染播放。AE(Adobe After Effects)是视频后期特效和动画制作的行家,前段时间充斥视野的MG动画就是用它制作的。如果真的可以实现,就会大大方便前端动画的设计。
官网地址:https://airbnb.design/lottie/
github地址:https://github.com/airbnb/lottie-web

GSAP介绍(http://www.topfe.cn/javascript/524.html

SVG与Canvas比较
两者都是HTML5推荐使用的图形技术。

SVG:
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用
Canvas:
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘

SVG压缩
svgo(svg optimizer的缩写)是一个基于Nodejs的SVG文件优化工具。
github地址:https://github.com/svg/svgo
带操作界面的GUI的svgomg地址:https://jakearchibald.github.io/svgomg/
SVG在线压缩合并工具:https://www.zhangxinxu.com/sp/svgo/

WebFont前端字体
webfont一般使用 4 种格式,即 eot / svg / ttf / woff 
https://icomoon.io/app/可以通过上传svg格式文件后生成以上各种4种格式的字体图标,步骤如下:
1. 准备svg图片
2. 打开icomoon选择icomoon App
3. import icons 上传本地的svg图片
4. 点击选中以后点击generate fonts形成字体图标
5. preferences可以设置样式。比如兼容ie,比如基线对齐等等
6. 最后下载文件就可以了

代码demo如下:

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?dl0vwl');
  src:  url('fonts/icomoon.eot?dl0vwl#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?dl0vwl') format('truetype'),
    url('fonts/icomoon.woff?dl0vwl') format('woff'),
    url('fonts/icomoon.svg?dl0vwl#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-pencil:before {
  content: "\e905";
}

也可以使用阿里妈妈MUX打造的矢量图标管理平台(http://www.iconfont.cn/),可以自定义下载各种格式的icon,平台也可以将图标转换为字体,便于前端开发自有调整与调用。

PS里栅格化的含义

当我们在PS中处理文字图层的时候,通常会使用到文字的栅格化功能。那么,PS里面的栅格化到底有什么作用呢?我们为什么要使用栅格化这个功能呢?
首先,我们得了解两个概念
①概念
PS中的各种工具和菜单的功能,都只适用于位图图像。因此,在PS中,如果存在非位图的图像,要想使用某些功能,比如滤镜功能等,那么,就必须转换为位图图像。

②概念
PS里面的图层。PS里面的图层,分为背景图层、普通图层和文字图层等等。
当我们在PS中输入文字后,会自动产生文字图层。然而,原始的文字图层只能做些字体、字号、字型、颜色等的修改,而不能使用工具或菜单上的某些功能。
要想让文字图层能使用某些猪如滤镜的菜单,那么,就必须将文字图层转换成为位图,即转换为像素,这样,就可以和PS中的各种对象一样,能正常使用各种工具和菜单来处理了。
因此,在这个时候,就必须使用栅格化这个功能。栅格化的功能就是将矢量对象转换成为位图或转换成为像素。

当然,一旦对象被栅格化之后,它之前所能使用的功能,那么就不能再使用了。

评论

0条评论

发表评论

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