共计 2628 个字符，预计需要花费 7 分钟才能阅读完成。
原创文章，转载请注明： 转载自cnorg.12hp.de
注意：由于网站空间位于国外，建议避开晚上的访问高峰期，以免因访问缓慢而影响你的使用体验。
若下载链接为空，是由于国外空间速度缓慢，引发缓存问题所致。请私信本站反馈！
最近需要修改 SVG 图片，有些很简单的图标，其实是可以通过 SVG 绘制的，一般编辑 svg 需要用 Adobe Illustrator，但是因为电脑上只安装了 PS，也懒得再安装一个消耗那么大的软件，所以想着能不能使用 PS 完成这件事。
对于 SVG 文件的输出，比较常规的做法是在 PS 里做完之后导出到 AI，之后生成 SVG，经常需要将文件在 PSD-AI-SVG 中来回折腾，相当麻烦；后来出了一款比较简单的脚本，叫作“save-ps-to-svg1.0.jsx”，可以在修改文件名之后将 SVG 文件右击直接快速导出。https://gist.github.com/reficedev/f20398d301014bfd10d6 最新版本，随时关注 github
PS 可以直接打开 SVG 格式文件，但是打开后会把矢量图都进行栅格了。所以需要把他转成 svg 路径
网上关于 PS 直接导出 svg 路径的文章很少，而且基本上都是相互抄，并且语焉不详，没些踩坑的耐性很难看明白到底说的什么，不过好在最终都被我一一解决了，整理如下。
脚本文件
首先，需要下载一个脚本文件 save-ps-to-svg1.0.jsx，关于此文件的最新信息，可以到 官网查看，将此文件放到 PS 安装目录下的 /Presets/Scripts 文件夹中，如果放置脚本的时候 PS 是打开状态，那么可能需要重启一下。
PS 绘制
- 搞定好脚本之后，打开 PS，新建图层：
- 图层新建好后，就可以绘制了
不过这里需要注意的是，无论使用什么工具，想要转换成 SVG 路径，那么都必须要是使用 形状工具 绘制出来的图像才可以，PS 中的形状工具很好找，下面的几个都是：
这里演示是使用 自定义形状工具，选择了一个气泡形状，在图层上拉一下，画出一个简单气泡：
- 保存文件
保存整个文件，使用默认设置即可：
- 导出 svg 路径
文件保存好后，接下来才能对图层进行转化，鼠标在图层的名称上双击，重命名为以 .svg 为后缀结尾的名字，例如 tosvg.svg:
重命名完毕后，依次点击 文件–> 脚本–>Save as SVG，即可在保存 psd 文件的相同目录下输入一份以 .svg 结尾的文件：
目录中的 .svg 文件：
使用编辑器打开 以.svg 结尾的文件，在文档的底部，可以看到形状的 path 路径(虽然有些不规范)：
图层合并
使用形状工具的时候，鼠标的每一次绘制就会产生一个图层，若是直接选中所有图层右键选择合并图层选项，那么输出的 svg 路径其实是将所有的图层一个个输出，而不是输出图层相交之后的结果。
想要输出图层相交之后的结果路径，首我们可以选中所有图层，在工具栏中选择 减去顶层形状 (或者其他选项也可以)，最后点击 合并形状组件，这样一来，所有的图层才能彻底合并，使用脚本输出的路径才是合并后图层的路径。
两个问题
- 输出的路径不规范
有时候，输出的路径会是下面这种情况：
每一条路径的后面都有一个字母，这些字母的大概含义如下：
- M = moveto(M X,Y)：将画笔移动到指定的坐标位置
- L = lineto(L X,Y)：画直线到指定的坐标位置
- H = horizontal lineto(H X)：画水平线到指定的 X 坐标位置
- V = vertical lineto(V Y)：画垂直线到指定的 Y 坐标位置
- C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
- S = smooth curveto(S X2,Y2,ENDX,ENDY)
- Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
- T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
- A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
- Z = closepath()：关闭路径
根据上述，图中 .svg 路径中的字母 m 和 L 我们都知道是什么意思了，但 Y 是什么鬼？V 为什么给了四个数字参数？
很明显，这其中定然有什么我们不确定是不是 bug 的 bug
如何解决
首先可以确定的是，那些字母是错的，但是字母前面的路径是对的。
我的方法是自己根据情况，将那些字母替换成合适的字母。
例如，我所绘制的形状是存在曲线的，二次贝赛曲线 Q 一共四个参数，所以我们可以路径中的字母 Y 和 V 换成 Q，我试了一下，确实是可行的。
- 形状翻转
将 .svg 中给出的 path 路径整理为合乎规范的 path 路径，放到 html 文档中在浏览器中查看，然后与原图对比，左图是我们希望看到的，结果如下，右图是根据 .svg 文件中给出的路径得到的：
稍微对比一下就可以看出，右边的气泡沿着 X 轴翻转 180° 才是左边我们真正想要的。
如何解决？
我的办法是，既然右边的气泡沿着 X 轴翻转 180° 才是左边我们真正想要的，那么我们就手动把它翻转一下好了。
X 坐标是不用动的，需要我们手动变动的只有 Y 坐标，随便写个翻转 Y 坐标的 JS 函数，把 .svg 文件给出的 path 路径输入即可，JS 函数示例如下：
- let reversePath = (path, svgHeight)=> {
- let arr=path.split(' ')
- for(let i=0;i<arr.length; i++){
- i%2===1 ? arr[i] = svgHeight-arr[i] : arr[i] = +arr[i]
- }
- return arr.join(' ')
- }
其中 path 为路径，例如 168.9280 167.9198 164.7704 159.9623 158.2457 155.9885，如果以 0 位起始，则路径基本上都是奇数位的坐标才是 Y 坐标，所以只需要处理 i%2===1 的，而又因为是相对于整个图层翻转，所以需要知道图层的高度才行，这里的 svgHeight 就是图层的高度。
办法虽然笨了点，但一般我们常用的 svg 形状，转化为路径一般也没多少，最重要的是能够解决问题。
注意：本教程仅适用于 cs5、cs6、2015。但是其实在 PS2015 及以上版本，我们就已经有了更快更方便的方法：
1. 依次打开文件 - 导出 - 到处首选项默认为 PNG 格式，下拉修改为 SVG 格式。
2. 选择形状图层，右击，找到快速导出为 SVG。
3．选择目标文件夹，保存，注意命名规范。
就是这么简单粗暴，一步到位。
最后，SVG 已经逐渐成为热门，微信也已经在移动端花大力气使用并优化了 SVG，再不学点关于 SVG 的知识，你就跟不上设计师的潮流啦。
