使用photoshop生成SVG的详细方法

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典 【面试题+详细答案 1000+】

---

因为SVG矢量图的优势关系，希望制作svg图片，目前手头有photoshop工具，没有Adobe Illustrator等专业软件。在目前拥有的环境下，使用ps来制作svg

一、安装插件 save-ps-to-svg1.0.jsx

下载一个脚本文件 save-ps-to-svg1.0.jsx，可以到 官网查看，将此文件放到 PS 安装目录下的 /Presets/Scripts 文件夹中，如果放置脚本的时候 PS是打开状态，需要关闭重启一下ps软件。

二、画图保存

（1） 新建一个文档， 使用钢笔或者其他形状工具画形状，右上方按钮，可以将形状合并
（2） 形状图层，起一个.svg的名字，为后续导出svg文件做准备
（3） 保存psd文件，比如名字为test1.psd

（4） 文件-》脚本》 save as SVG，生成的文件如下

（5） 使用记事本等打开ppp.svg.ai

红色框框中的部分，即为图形的路径。 在svg中是使用的时候，需要将每一行的最后字符 提到每一行的第一位。 这里面的代码较为正常，有人生成出v，p等字母的，请参考