PS编辑svg文件 生成svg路径 快速导出SVG文件方法

  • PS编辑svg文件 生成svg路径 快速导出SVG文件方法已关闭评论
  • 1,359 次浏览
  • A+
所属分类:媒体图像

注意:本站启用了缓存系统,如果你的账户登陆不了,那是因为缓存导致,刷新再登陆一次即可。如还不行,只需打开任意一篇文章即可。所有資源均支持繁體中文,需繁體中文可通過抖音號聯繫站長提供。

最近需要修改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,新建图层:

PS编辑svg文件 生成svg路径 快速导出SVG文件方法

  • 图层新建好后,就可以绘制了

不过这里需要注意的是, 无论使用什么工具,想要转换成 SVG路径,那么都必须要是使用形状工具绘制出来的图像才可以, PS中的形状工具很好找,下面的几个都是:

PS编辑svg文件 生成svg路径 快速导出SVG文件方法

这里演示是使用 自定义形状工具,选择了一个气泡形状,在图层上拉一下,画出一个简单气泡:

PS编辑svg文件 生成svg路径 快速导出SVG文件方法

PS编辑svg文件 生成svg路径 快速导出SVG文件方法

  • 保存文件

保存整个文件,使用默认设置即可:

PS编辑svg文件 生成svg路径 快速导出SVG文件方法

  • 导出 svg路径

文件保存好后,接下来才能对图层进行转化,鼠标在图层的名称上双击,重命名为以 .svg为后缀结尾的名字,例如 tosvg.svg:

PS编辑svg文件 生成svg路径 快速导出SVG文件方法

重命名完毕后,依次点击 文件–>脚本–>Save as SVG,即可在保存psd文件的相同目录下输入一份以 .svg 结尾的文件:

PS编辑svg文件 生成svg路径 快速导出SVG文件方法

目录中的 .svg 文件:

PS编辑svg文件 生成svg路径 快速导出SVG文件方法

使用编辑器打开 以.svg结尾的文件,在文档的底部,可以看到形状的 path 路径(虽然有些不规范):

图层合并

使用形状工具的时候,鼠标的每一次绘制就会产生一个图层,若是直接选中所有图层右键选择合并图层选项,那么输出的 svg 路径其实是将所有的图层一个个输出,而不是输出图层相交之后的结果。

想要输出图层相交之后的结果路径,首我们可以选中所有图层,在工具栏中选择 减去顶层形状(或者其他选项也可以),最后点击 合并形状组件,这样一来,所有的图层才能彻底合并,使用脚本输出的路径才是合并后图层的路径。

PS编辑svg文件 生成svg路径 快速导出SVG文件方法

两个问题

  • 输出的路径不规范

有时候,输出的路径会是下面这种情况:

每一条路径的后面都有一个字母, 这些字母的大概含义如下:

  1. M = moveto(M X,Y) :将画笔移动到指定的坐标位置
  2. L = lineto(L X,Y) :画直线到指定的坐标位置
  3. H = horizontal lineto(H X):画水平线到指定的X坐标位置
  4. V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
  5. C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
  6. S = smooth curveto(S X2,Y2,ENDX,ENDY)
  7. Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
  8. T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射
  9. A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
  10. 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函数示例如下:

  1. let reversePath = (path, svgHeight)=> {
  2. let arr=path.split(' ')
  3. for(let i=0;i<arr.length; i++){
  4. i%2===1 ? arr[i] = svgHeight-arr[i] : arr[i] = +arr[i]
  5. }
  6. return arr.join(' ')
  7. }

其中 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的知识,你就跟不上设计师的潮流啦。

 

资源下载此资源仅限注册用户下载,请先

免责声明:

根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供本站会员用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,禁止分享或传播。需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担 。警告:本站仅服务站内会员用户,禁止在中国大陆用户下载使用、分享或传播,违者后果自负。同意本条款你方可捐赠购买下载本站资源,不同意请离开。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

服务条款:

本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,购买充值 即代表你对本站的无偿捐助,非购买本站资源。仅为维持服务器的开支与维护,全凭自愿无任何强求。

为防止盗链,本站所有资源均需登陆后下载,即使是免费的。如果链接失效,通过扫描下面的本站官方抖音号二维码,“私信本站”联系管理员补链;下载抖音极速版并关注,还可以领取现金红包哦!

如需解压密码,关注微信公众号“心语家园“或扫描下面的公众号二维码,发送解压密码获取。默认解压密码即最新密码,如密码无效,可尝试其他密码。

  • 官方微信公众号
  • 扫一扫关注微信公众号,如果你觉得本站帮到了你,请通过下面的赏字按钮捐赠本站,谢谢!
  • weinxin
  • 本站官方头条号
  • 扫一扫关注官方头条号,新老用户扫描下载抖音极速版,可领取最高269元现金,每天使用都可领钱。
  • weinxin