VG简介

只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持很好了

SVG与Gif的比较

SVG图片: 矢量放大,动画也是矢量,体积极小,相当于一个.txt文本的体积,几b到几kb

GIF图片:固定大小,动画为图片逐帧显示,体积贼大

SVG应用的平台

Android应用、IOS应用、网页、电脑软件

SVG的设计工具

Sketch、Photoshop、AI等等

我个人推荐使用Sketch来设计svg图形

svgator动画制作工具

好了废话不多说啊,以上是svg的科普知识而已,下面介绍制作svg动画的强大工具

这个工具是一个网页在线的svg制作工具,只需要进入网页就可以制作svg动画了,不过这个工具制作起svg动画来是跟ae使用差不多的,如果有ae的基础基本使用就非常好上手啦。

工具非常强大,而且没有广告,重要的是免费使用的,制作好动画之后呢直接又可以导回出svg图片了,这时你的svg就是会动的了,你就可以直接应用到网页或者移动应用的开发当中了

工具的编辑界面

这里还有一个技巧,你可以去阿里图标库去下载svg图片导入到这里来编辑添加动画,然后再导出

前往工具地址

https://www.svgator.com/

是国外网站所以你需要翻墙来使用喔

网页中SVG应用的案例

比如又拍云官网就大量使用了svg动画,还有更多大家自己去发现学习了。

通常可以被用作一个图标的特效,banner背景特效等等,在移动应用中svg可以用于制作app的引导页动画和按钮等

SVG动画制作工具 , 从此抛弃臃肿的gif的更多相关文章

  1. 关于HTML5在动画制作工具Animatron的一些问题

    Animatron是国外一款在线HTML5动画制作工具,网址:www.animatron.com 当然,想使用的话,是需要FQ的. 用animatron制作好的动画是可以下载为代码和GIF的,这时候付 ...

  2. MFC实现Gif动画制作工具

    每天来博客园逛,看里面各种好文章,发现自己已经许久没有分享点什么了. 前几天用MFC设计了一个小型的Gif动画制作工具,思路如下: 1.支持图片格式:"*.jpg","* ...

  3. svg可视化制作工具

    svg可视化制作工具直接ai里面用钢笔路径画好 然后右键建立复合路径 最后存储为svg即可 这样生成的svg就带path标签了

  4. [置顶] 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam

    由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...

  5. 我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam

    由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程 ...

  6. css3动画制作工具

    1.从chrome webstore下载 chrome应用商店安装地址 2.直接下载crx文件 如果无法访问到chrome的应用商城,可以选择下载app.crx文件,在chrome中打开chrome: ...

  7. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  8. SVG交互动画制作

    前面我们已经说过了要怎样制作CSS3动画,但是SVG动画一直都没有时间研究过,正好趁现在有一点时间静下心来研究一下. 一般来说,常见前端动画实现方案分为三种,CSS3动画,HTML动画(SVG动画), ...

  9. CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

随机推荐

  1. ubuntu ceph集群安装以及简单使用

    ubuntu ceph安装以及使用 1.安装环境 本文主要根据官方文档使用ubuntu14.04安装ceph集群,并且简单熟悉其基本操作.整个集群包括一个admin节点(admin node,主机名为 ...

  2. 海外版本Google登录

    海外版本: 1.安裝谷歌安裝器:手机浏览器搜索“谷歌安装器”,安装酷安的好一些,地址: https://www.coolapk.com/apk/com.goplaycn.googleinstall 2 ...

  3. sea.js模块加载工具

    seajs的使用 seajs是一个jS模块加载器,由淘宝前端架构师玉伯开发,它可以解决命名空间污染,文件依赖的问题.可以在一个js文件中引入另外一个js.require('a.js') 1.安装 np ...

  4. Windows下安装PIL进行图像处理

    过程一波三折 参考 http://blog.csdn.net/zxia1/article/details/8254113 http://stackoverflow.com/questions/3544 ...

  5. Junit用断言对控制台输出进行测试

    核心思路: 在测试前,将标准输出定向到ByteArrayOutputStream中去 用输出流文件断言内容 测试完成,将标准输出修改为console 具体操作示例 基本通用复制粘贴操作 public ...

  6. js登陆验证错误不刷新页面

    验证函数返回 false;返回到onclickonclick 其实也是一个函数.. 所以需要加 return;

  7. JDK8新特性之方法引用

    什么是方法引用 方法引用是只需要使用方法的名字,而具体调用交给函数式接口,需要和Lambda表达式配合使用. 如: List<String> list = Arrays.asList(&q ...

  8. 中山大学深圳研究院“智能金融和区块链技术”论坛(理论+实战PPT)

    中山大学深圳研究院在昨天11月15号在深圳南山区虚拟大学园举办了"智能金融和区块链技术"论坛. 本次论坛邀请了中山大学移动互联网与金融大数据实验室郑子彬教授团队系统地介绍智能金融及 ...

  9. 解析TextView中的URL等指定特殊字符串与点击事件

    使用TextView时,有时可能需要给予TextView里的特定字符串,比如URL,数字特别的样式,必希望能够添加点击事件.比如发短信时,文字里的url就可以点击直接打开浏览器,数字可以点击拨打电话. ...

  10. matplotlib.pyplot 属性用法

    import matplotlib.pyplot as plt x_values = list(range(1, 1001)) y_values = [x**2 for x in x_values] ...