【Axure8基础教程】SVG格式图标使用方法介绍

在制作Axure原型的时候会用到很多图标，如下图所示：

看到这些图标的时候，有的人可能会想到.jpg、.png格式的图片，当然.jpg、.png格式的图片也是可以使用的，但不是最佳选择，这些格式的图片有两个很大的问题

1、图片大小固定，尺寸改变后，无论变大还是变小图片都会失真变得模糊，在Axure中就是如此，等比缩放也会失真

2、图片颜色无法修改，想改变颜色是不行的，必须提前就做好

以上这两个问题，是很影响原型的灵活行和扩展性的

我们应该使用什么格式的图标呢？

其实Axure已经给我们提供了解决方案，3月3日Axure官方发布了Axure RP 8.0.0.3330，该版本发布了一个很重要的功能，– Convert SVGs into Shapes，将SVG格式转化为形状，Axure RP 8.0.0.3330及以上版本都有此功能

SVG是什么呢？

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。

通俗来讲就是一种可以放大缩小并且不会失真的一种图形格式，用了它，就可以随意改变大小（最好是等比缩放，不然会变形哦），改变颜色啦！~

如何使用SVG图片？

其实Axure自带的有SVG格式的元件库，在左侧面板元件库里，默认是default的元件库，点击出现下拉框选择Icons就可以切换成图标库了

拖拽进入编辑面板，就可以改变颜色和大小了

自带图标库不够用怎么办？

要是自带的图标库里没有想要的图标或者图标不合适该怎么办呢，在哪里可以找到可以用的图标库呢？

这里我推荐一个非常好用的在线图标库，阿里巴巴矢量图标库【http://www.iconfont.cn/】，里面有非常多的图标，可以通过关键字搜索并下载SVG、AI、PNG格式的图标，下面来演示一下使用过程：

1、进入阿里巴巴图标库网站，输入关键字搜索“编辑”，会出现很多编辑的图标

2、找到想要的图标后，鼠标hover，可以收藏留待后用，这里我们点击下载按钮，出现下载弹出框

3、这里就厉害啦，可以改变颜色和图标大小哦，最下方可以SVG下载、AI下载、PNG下载，点击SVG下载就可以获取想要的图标了

4、接下来将下载好的图标放入Axure中，右键选择“转换SVG图片为形状”，这样就获得了可以随意改变颜色和大小的形状图标了。