本文主要探讨 JPG/PNG 转 SVG 矢量格式并支持 FILL 的方法，介绍在线转换网站和通过 illustator 转换的经验。
应该说，国内网站很少用到 SVG 格式，在此之前我只是听过，而没有用过。前些天遇到一个外国网站，在重要的动画位置使用了 SVG 图片，当我想修改的时候发现里面大有乾坤，分享一下感想和经验。前提我想说，SVG 格式适用于如 LOGO、图标这类颜色并不多的图，颜色太鲜艳图还是谨慎为好。
注：本文中使用的 illustrator 版本为 Adobe Illustrator CC 2017，其他版本未测试。
初探和原理
右键打开 SVG 文件一看，<svg> 和一堆<path> 标签映入眼帘，原理看起来像一张白纸，然后用 path 来画出路线，用 fill 属性来填充每个区域的颜色，从而实现矢量缩放。很神奇，关键是大小和颜色可以随便改，用 css 或者 js 可以直接控制图形的颜色和大小，这个操作太给力了，在部分场景非常实用。
不过，我随便找了一张 png 图像，用 Photoshop 打开，发现也可以到处为 svg 格式。但是用 PS 导出的 SVG，我看了代码，完全是另一片天地。简单来说就是一个<image> 标签里面包着一个 base64 编码的图片，这样的话我就不能改颜色了呀，这我要你何用！
所以 SVG 可能有两种形式：
- 真 SVG：<svg>+<path>+fill 属性的组合
- 假 SVG：<image>+base64 图片
在线转换 适用于颜色较单一的图片
网络中，大部分 JPG/PNG 转 SVG 都转出的是假 SVG（这里说的假 SVG 是我个人意念，非专业术语）。然而如果我们想得到一个真正的矢量 svg 时，需要得到真 SVG 编码。我找寻了国外网站，仅找到两个：
http://www.pngtosvg.com/ 免费 功能单一
https://vectormagic.com/ 收费还挺贵，功能强大
这里要注意的是，由于 SVG 是画出来的，颜色越多，代码越多。所以如果颜色较为单一时 （如 5 个颜色以下），用在线转换网站已可以满足要求，但如果渐变图片就头疼了。我找了一张颜色较为单一的 google 图，和一张有渐变的 chrome 图做对比。
谷歌图看起来还行，也就是缺了点感觉。chrome 就有点惨不忍睹了。
所以真的颜色较多的时候，或者真有个渐变，那么下面介绍的 Illustrator 可能更好用一点。
使用 Adobe Illustrator 编辑后导出 SVG
首先，只要 jpg 或者 png 图片没有太小，比如宽高都大于 200px，并且没有阴影等乱七八糟的效果，我认为用 Illustrator 就可以做出比较好的矢量 SVG。操作流程如下：
1. 用 Illustrator 打开 JPG/PNG 图片。
2. 点击图片，进入选择状态，上面的工具栏点击 “图像描摹” 右侧的下拉箭头，选择 “高保真度图片”。
这时无敌的 illustrator 已经把普通 jpg/png 转换成了矢量图。但还有一个问题，就是仔细观察的话，这个图是有白色背景的。如果你恰好需要这个背景那太好了，否则我们必须把这个背景弄掉。
3. 打开描摹面板。两种方法，第一种，点击工具栏上的按钮。第二种，右上角切换工作台模式。二选一，如图：
4. 展开高级，方法选择第一个 “临接 （创建木刻路径）”，选项勾选 “忽略白色”，看图就明白了：
这时拖到外侧看一下图片背景，没了就对了。如果还有，我没招了。
5. 菜单栏选择文件-> 导出-> 导出为…，选择保存路径后，跳出 SVG 选项卡，样式部分我一般选择内部 CSS，其他默认值。 OVER.
