一些提高 SVG 开发工作效率的工具
发布在SVG开发与应用2016年9月13日view:789HTML5JavaScriptsvg
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

最近做了一个关于SVG的应用的技术分享网站svgtrick.com,会同步一些文章到这里来,更多的可以去网站看看。

工欲善其事必先利其器,这里推荐一些关于SVG方面的工具,当在web开发中要使用SVG的时候,这些工具能帮助你提高工作效率,能更加愉快的玩SVG。

1、矢量编辑软件

要使用SVG,当然离不开矢量设计软件,下面来推荐几款矢量设计软件。

Adobe Illustrator

提到矢量设计软件,就不得不提Adobe的Illustrator

Adobe Illustrator是一款非常强大的矢量编辑软件,目前在设计师中使用的也非常广泛。

Corel Draw

Corel Draw是另一款非常流行的矢量设计软件,也有非常多的人使用。

Sketch

Sketch是这两年来风靡设计界的,屡获各种设计大奖的矢量设计软件。不过它只提供了Mac平台的用户使用。

2、一些关于SVG的JavaScript库

在web开发中,SVG一大应用就是编写一些非常有趣、酷炫的动画效果。而且这个趋势在这一两年越来越明显,在网页中 SVG动画也越来越常见。

要想方便的操作SVG代码,提高编写动画效果的效率,可以借助于一些JavaScript库来达到这个目的。

下面推荐几个我认为非常强大的JavaScript库,主要是在编写SVG动画的时候,它能大大的提高效率,操作SVG也非常方便。

GreenSock

GreenSock是今年一个备受瞩目的编写动画效果的JavaScript库,它提供了一整套的编写动画效果的 解决方案,其中对于SVG的支持也非常强大。

在官方网站也提供非常多的实例,并且针对SVG也提供了相关的插件来支持。 比如drawSVG和*MorphSVG*等。

下面举个简单的实例,比如要实现下面这个动画效果:

先引入相关的GreenSock的js文件

//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js
//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=5

然后在html中插入一个圆圈的SVG代码,如下所示:

<svg id="svgR" class="svgloader" height="100" width="100">
        <circle id="pathR" cx="50" cy="50" r="35" stroke="#a71ce5" stroke-width="2" fill="transparent" transform="rotate(-90, 50, 50)" /></circle>
</svg>

然后编写下面几行js代码,就可以实现上面的动画效果。并且还可以使用提供的接口来控制动画的 暂停、播放等状态,非常方便。

var svgR = document.getElementById("svgR"),
    pathR = document.getElementById("pathR"),

TweenMax.set(pathR, {drawSVG:0});

function start(){
        TweenMax.to(pathR, 1.25, {drawSVG:'100%', ease:Power2.easeIn, onComplete:pathOut});
    }

    function pathOut(){
        TweenMax.to(pathR, 1.25, {drawSVG:0, ease:Power1.easeOut, onComplete:start});
    }

    start();

仅仅只需要几行代码就能轻易地操作SVG来编写想要的动画效果,就是这么方便。

SnapSVG

SnapSVG是一个专门用来操作SVG的库的,特别是针对SVG的各种属性提供了非常方便的 接口来操作。官方有详细的入门教程,可以去这里看看。

下面来一个简单的实例,比如我想来画一个圆圈:

var s = Snap("#svg");
var circle = s.circle(150, 150, 100);
circle.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 2
});

运行上面的代码,它就会在页面中输出半径为100,位置在x和y方向为150px的地方。是不是非常简单,当然要 改变它的属性也非常简单:

circle.animate({
  r: 50
}, 1000);

这里使用了Snap的animate方法,它会在1秒之内把圆圈的半径从100变为50,并且自动会添加自然过渡的动画效果。

3、SVG优化工具

如果你直接从设计软件中导出SVG的话,大部分软件都会输出很多的冗余的代码 如果不优化直接使用的话,SVG文件会有很多冗余的,而且体积也会有点大。所以最好是用一些工具来优化下代码再用到实际开发中。

下面介绍几个优化工具:

SVGO

SVGO-GUI,这是一个基于node的优化工具。运行软件之后,直接把文件拖入软件中它会自动帮你优化好SVG文件。

SVG Optimiser

Peter Collingridge’s SVG Editor,一个在线编辑器,你可以把你的代码贴进上面链接网页中的编辑框中,然后点击load按钮,它就会解析你的SVG代码,并且提供优化的选项来优化SVG代码:

原文地址

评论
发表评论
暂无评论
WRITTEN BY
聆木听风
前端攻城师~~~!
TA的新浪微博
PUBLISHED IN
SVG开发与应用

专注于分享 svg 使用经验、技巧、以及教程的网站。

当然,这里不止于SVG,对于SVG动效设计的最佳搭档的GreenSock、Snapsvg、Mojs等动效js也会进行涉猎。

投资在学习上的时间总有一天会回赠给你自己 !

我的收藏