SVG 素材获取（上）

SVG 素材获取途径主要有四种：Office 365软件自带的 SVG 图标库；从第三方矢量软件中导出（绘制+转换）；用文字编辑器生成；从互联网上的标图库中下载。

Office 软件自带

Office 365推出新功能“图标”，支持直接在 Office 程序中插入图形。该库中提供按“人物”、技术或电子”等26个常用类别整理的近500多个图标。可使用右侧的滚动栏上下滚动浏览类别，或者在左侧的导航栏中单击类别名称，直接转到所需的类别。

图注：内置图标

所有图标，可以通过以下网址直接来获得，使用 CHROME 中的“检查”功能，可以直接获到 SVG 图像的 SVG 代码：

网址
://hubblecontent.osi.office.net/contentsvc/microsofticon

缺点：形状数量还不够多，期忘未来能继续增加。只提供了单色图标。必须联网才能使用。

使用第三方软件（复制法）

大部分第三方矢量软件均支持 SVG 格式文件的转换与导出，常用的有AI、PS、CDR，这里以以大名鼎鼎的AI（Illustrator）为例，说一下通过剪贴板导入的方法（Office 中常用手段）：

图注：AI中复制图形

• 第一步，将素材使用AI（Illustrator）软件打开。
• 第二步：将图形选中，并点击右键取消编组。
• 第三步：选中其中一个元素按下键盘【ctrl-C】复制素材。
• 第四步：打开 Office 365软件，按快捷键【CtrlAlt-V】。

缺点：必须安装专用的第三方矢量软件，需要在两个软件中切换操作。

使用第三方软件（转换法）

使用位图转矢量图神器VECTOR MAGIC（小编强烈推荐，PPT 动画高手必备）。

图注：VECTOR MAGIC

• 第一步，打开图片或者直接拖动图片到显示区域；
• 第二步，提供了自动、基本、高级三种模式，选择自动处理；
• 第三步，一直点击NEXT下一步就可以完成。

缺点：必须安装软件，但是相比收益来说，还是可以忍受的。

如果不想安装软件，还可以使用在线位图转矢量图网站VECTORIZER，在线操作就行，官网链接为：

网址://www.vectorizer.io/

图注：vectorizer

• 第一步，上传位图文件，直接进入图片处理向导;
• 第二步，选择色彩或者黑白模式;
• 第三步，设置颜色数量（黑白模式跳过），一般8-16位；
• 第四步，设置边缘平滑细节；
• 第五步，选择一张满意的矢量图片输出；
• 循环步，完成后还可以继续设置参数，直到满意。

缺点：除了需要上网，并需要自己找图片，还能说啥。

使用文字处理工具

下面的例子是一个简单的 SVG 文件的例子。文件使用 .svg 后缀来保存：

<?xml version="1.0" ?>

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

</svg>

第一行，包含了 XML 声明。

第二行，SVG 代码以 <svg>标签开始，这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度，xmlns 属性可定义 SVG 命名空间。

第三行，SVG 的<circle>标签用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。stroke 和 stroke-width 属性控制如何显示形状的轮廓，这里轮廓为 2px，黑色边框。fill 属性设置形状内的颜色，这里为红色。

当然SVG非常复杂，通常采用图形程序绘制而非手工编码。

SVG 素材获取（下）

除了软件的方式，还可以通过互联网来获取海量的资源，我们可以轻松的找到和分享更多更丰富的图标，让我们的设计变得更加便利。

Iconfont，★★★★★

名称：阿里巴巴矢量图标库（国内）

网址：//www.iconfont.cn/

数量：300万+

特点：全免费、全含SVG、可搜索、有彩色、无广告

图注：阿里巴巴矢量图标库

阿里巴巴矢量图标库（小编强烈推荐），里面具有海量的图标分享，下载格式中很典型的就是svg图形格式。

Easyicon，★★★☆☆

名称：easyicon（国内）

网址：//www.easylogo.cn/

数量：60万+

属性：基本免费、部分SVG、可搜索（筛选）、有彩色、有广告

图注：easyicon

FlatIcon,★★★★★

名称：FlatIcon（国外）

网址：//www.flaticon.com/

数量：100万+

属性：部分免费、都有SVG、可搜索（筛选）、有彩色、少量广告

图注：FlatIcon

FlatIcon 还提供了分类和图标集2种不同的存档页，真是无微不至的关心啊！

iconmonstr,★★★☆☆

名称：iconmonstr（国外）

网址：//iconmonstr.com/

数量：4000+

属性：全部免费、都有SVG、可搜索、黑白、无广告

图注：iconmonstr

Iconmonstr是一个专门提供黑白两色的矢量图标的，绝佳免费图标下载网站。

其它网站

Findicons、IconArchive、iconfinder等等非常多，而且各有特色，总有一款适合你。

图形的兼容性

动画与交互

SVG 文件支持动画与交互，能够与 CSS 和 Javascript 结合使用。下面的示例 SVG 称为恐怖的嘴。这是 SVG 与动画的巧妙结合，鼠标移动到文字标签上时展示嘴的变化。前网以下网址，进行实践：

网址
://svg-whiz.com/svg/linguistics/theCreepyMouth.svg

图注：可交互SVG文件

左图是插入的图形，右图是转换后的形状。选择这个案是为了说明图形在 Office 中的一些限制。很不幸，Office 现在只支持静态 SVG 文件，没有动画，更没有交互。

如果你进一步，对比原始的 SVG 文件（theCreepyMouth.svg）与 PPT 内部的 SVG文件（image2.svg,可以右键直接导出该文件），会发现这两个文件其实是不同的，原始文件中的所有 CSS 和 Javascript 内容己经被移动，这是导致动画与交互性消失的根本源因。

向后兼容性

图形是在 Office 新版本的功能，但它也能在较旧的版本中正常显示，能够实再向后兼容。当您在最新版本的 Office 中使用 SVG 文件时，它会自动生成高分辨率的 .png 文件以实现向后兼容性，因此旧版本仍然显示相同的图形，但没有矢量优势。

图注：可视化的兼容性

事实上，为了保持兼容性，在 PPT 文档中同时存在 PNG 和 SVG 两种格式文件，PNG 用于保持在低版本软件中也能正常显示。

SVG 格式的兼容

图注：渐变图形BUG排除前后

经小编测试，图形目前基本能支持 SVG 1.1标准（排除渐变属性的 BUG 后）。对于简单形状都能很好支持，但是过于复杂的形状组合，还会有一些变形的情况，好在微软一直在默默改进（比如：早期不支持文本效，现在己经可以支持）。

与形状的兼容性

图形与形状在使用上有很多共性，尤其是单色的图形，但还是存在着一些限制。形状没有渐变填充或线条选项，只有纯色；无法取消组合，也没有编辑点功能，无法对矢量进行局部调整；布尔运算也不近相同。某种程度上，图形的改造性不如形状强大。图形效果与形状效果基本一致，阴影、映像、发光、柔化、3D支持的不错，只是在3D的细节上有一些区别。

好在新版的 Office 365中提供了转换形状的功能，可以将图形转换为内置形状。即可对 SVG 文件进行反汇编并编辑其各个部分。转换文件很容易；只需要右键单击选中的图形，然后从显示的上下文菜单选择“转换形状”即可。

图注：转换后丢失文本内容

但是这个转换的功能也不是万能的，仍然看最初的那张图 theCreepyMouth.svg ，转换为形状后，文字信息全部丢失了。除了文字，各种 SVG 滤镜、渐变属性能支持显示，但转换后会丢失属性。另外图形支持与形状的布尔运算，通过选择图形和形状->合并形状>联合，图形被编辑为新形状。但这并非真正意义上的布尔运算，比如将最终形状导出后，仍然是原图形文件，并非预期的结果，但预计微软在未来将会修正这个 BUG 。

相互转换性

• 图片转换：图片是位图，Office 不支持直接转成矢量。但可以过第三方软件转换为SVG格式。比如AI、PS、CDR，VECTORIZER（在线），小编强烈推荐VECTOR MAGIC。
• 形状转换：形状通过剪贴板转换成图片。但是非常遗憾，形状无法转换成SVG格式。
• 图形转换：图形通过剪贴板转换成图片，这点与形状是一致的。在最新的 Office 365中，增加了一个“转换为形状”的功能（快捷键：CtrlShift-G，点击出现“是否转换为图形”的提示）。这时SVG 图形就彻底变成了形状，但是这个导出并不完善。
• 关于图元：由无法将形状转换为图形，图元还是有存在的必要的。图片、形状及组合，均可转换为 EMF 格式。但是转换 SVG 存在BUG，会失去矢量性，甚至丢失图片。

改进的建议

功能方面

• 支持独立的设置：如果原图有多种颜色填充和描边，在 Office 中进行填充和描边的编辑的话会被统一配色。最好能够像形状组合那样，单独修改其中独立形状元素。
• 能够编辑顶点：图形虽然能够更改一些填充、线条等属性相关的操作外，但失去了“矢量编辑”的特性，即无法像 PPT 形状一样去编辑顶点。
• 文本编辑模式：如果有可能话，提供对SVG源文件级的修改，包括能够直接以文本的形式创建。
• 完整的布尔运算：能够实现像图形一样的完整的布尔运算，也希望能将修改后的结果导出。

BUG 方面

• 渐变属性的BUG：渐变属性不支持中文URL，使得设计师误以为在 Office 中不支持渐变图形，其实只需要将中文改为英文即可。
• 填充图形的BUG：图形不能象形状那样直接添加文字，但可以通过在矩形中填充图形的变通的方法来实现。这里存在一个小BUG，图形填充后，该填充选项消失了。