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

Question

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

http://raphaeljs.com/icons/

Answer 1

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

  

档案 - ＆gt;出口 - ＆gt;导出为...并在文件设置中选择SVG。

原始答案：

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

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

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中的信息面板，一次选择一个路径点并手动记录点的位置本身及其句柄，以及那些使用absolute curveto commands, 'C'（对于带句柄的点）和absolute lineto commands, 'L'为没有句柄的点手动创建路径。

Answer 3

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

Answer 4

所有答案都很好，但对我来说它们太多了，Adobe提供了一个在线工具：

http://adobe.com/go/extract_tryitnow_en

您所要做的就是上传/拖动＆amp; drop / your .psd文件，选择路径图层并下载为svg。并且您可以提取svg路径，特别是d属性。

然后我做的是将path放入g元素，然后缩放g并翻译path

Answer 5

对于自定义形状，您可能需要查看最近发布的名为Convert Custom Shapes File to SVG Set的开源脚本（适用于Photoshop CS3或更高版本），用于转换自定义形状文件（.csh）或自定义将首选项文件（CustomShapes.psp）整形为一组SVG文件。