Photoshop自定义形状到SVG路径字符串

Question

有没有办法让SVG路径字符串脱离Photoshop自定义形状或路径？或者是否有另一种获取/构建类似数据的方法？我想做类似的事情:

http://raphaeljs.com/icons/

Answer 1

更新:在最新版本的Photoshop中,有一个内置选项可将图像导出为SVG,它可以很好地处理路径和自定义形状.做就是了:

文件 - >导出 - >导出为...并在文件设置中选择SVG.

原答案:

从Photoshop CC 14.2开始,您可以直接从Photoshop创建SVG文件:

1. generator.json在用户主文件夹中创建一个以下面的内容命名的文件.
2. 重新启动Photoshop并打开PSD文件.
3. 激活生成器:文件>生成>图像资源.
4. 将图层重命名为<something>.svg.
5. svg文件将在PSD文件旁边的assets目录中创建.

generator.json的内容:

{
    "generator-assets":  { 
        "svg-enabled": true
    }
}

资料来源:http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/

Answer 2

1. 在Photoshop中选择并复制路径
2. 启动Adobe Illustrator
3. 创建一个新文档
4. 糊
5. 保存为SVG

但是,如果您有Illustrator但尚未创建所有路径,则可能更容易在Illustrator中直接创建它们.

如果您没有Illustrator,最好使用免费的Inkscape SVG编辑器绘制路径.

如果你已经在Photoshop中有路径,并且没有Illustrator,我能想到的最好的方法是打开Photoshop中的信息面板,一次选择一个路径点并手动记录点本身的位置作为它的句柄,从那些手动创建路径使用绝对curveto命令,'C'(对于带句柄的点)和绝对lineto命令,'L'为那些没有句柄的点.

Answer 3

另一种选择是在photoshop中将文件保存为EPS,确保检查导出向量,然后将其加载到插图中并保存为SVG