一些提高 SVG 开发效率的工具

聆木听风
3,398 阅读4分钟
原文链接： 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代码：

avatar
文章
阅读
粉丝