前端工具

2016.5.7 - 南京

1.svg在线生成工具：Method Draw

Method draw 是一个基于 web 的 SVG 编辑器，带有一个两边伴有工具的画布的直观的界面。你可以画线条，形状，输入文本或者使用内置的形状，然后编辑绘画兑现的属性。使用 SVG 格式导出图像（也可以变成 SVG base64 格式）或者直接使用 PNG 保存。还可以导入图片编辑，注意导出svg步骤：File-Save Image…(Ctrl+S)默认就是导出svg格式.界面是这样的

MethodDraw

试着用它画了一个流程图

MethodDraw

注意右边的那条合同金额小于50万的，是用几个矩形处理的，没有现成的弯曲的流程图，不过你还可以绘制路径或者修改其他图形的路径点

2.b64

b64 是一个通过将图像格式转换为 base64 来进行优化的小工具。你可以直接把你的 SVG 图像（或者 JPG 和 PNG 也行）扔进去，然后直接把结果作为 CSS 弄到你的网站上就行了。界面是这样的

MethodDraw

我把上面的flow.svg拖进去得到的结果是这样的：

/* file size: 7.3ko | already optimized | base64 size: 9.8ko */
.method-draw-image-2 {
  background-image: url(data:text/html;base64,PHN2Zy......此处省略N个字符);
}

这样就可以在css中直接调用了

3.Flatty Shadow

Flatty Shadow在线为Icon图标生成长阴影效果

MethodDraw

它还可以选择矩形或扁平效果，比如这样

MethodDraw

4.Animate.css

Animate.css不是生成代码的工具，但绝对是各种动画效果的参考示例网站。

MethodDraw

记得用键盘上的↓体验，这里有一些超链接效果

5.Vivus(source)

Vivus 是一个能动画js类库，它能够给SVG图像显示出被画出来的过程。Vivus是没有其他类库依赖的（比如jQuery)。你仅仅需要在页面中加入这个.js文件，然后传入需要被用来动画的SVG部分就行。同时通过指定一些配置，它能够在页面加载后直接显示动画效果。首页上是这样

MethodDraw

6. easyicon

搜索图标的网站，非常实用的图标，找素材的可以在这找，不过只支持png，ico，icns下载格式

7. 阿里巴巴iconfont矢量图标库

Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，持续更新，Iconfont平台为用户提供在线图，可以导出SVG，AI，PNG格式，然后可以自己再修改,界面如下

MethodDraw

8. fontello一款WEB-FONT合成器和 icomoon

Fontello:是一个免费Web-font图标大集合，设计师不仅拥有所有你需要的图标，而且你可以挑选并选择你所需要的字形，并编译成自己需要的一套，自定义Icon的方法非常简单，以后你就可以用自己的一套网站素材了.

Fontello.com提供了12种字体icon的在线制作，你可以选择其中的某几个icon生成你需要的图标.不仅如此，你还可以在自己用ai或其他工具自己制作svg图标，然后上传到网站上，让网站帮你生成字体图标，非常方便.不过网站上已经提供的图标非常的多，非常多，非常……而且导出之后就有html的demo可以运行查看效果，界面如下

MethodDraw