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

Posted 2023-02-16

【中文标题】Photoshop 自定义形状到 SVG 路径字符串

【英文标题】：Photoshop Custom Shape to SVG path string

【发布时间】：2011-07-21 18:52:55

【问题描述】：

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

http://raphaeljs.com/icons/

【参考方案1】：

更新：在最新版本的 Photoshop 中，有一个内置选项可将图像导出为 SVG，该选项适用于路径和自定义形状。做吧：

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

原答案：

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

在您的用户主文件夹中创建一个名为 generator.json 的文件，内容如下。 重新启动 Photoshop 并打开您的 PSD 文件。 激活生成器：文件 > 生成 > 图像资产。 将图层重命名为<something>.svg。 将在 PSD 文件旁边的 assets 目录中创建 svg 文件。

generator.json 的内容：

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

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

【讨论】：

这个答案应该被选为正确的。无需外部工具。效果很好。谢谢@Tzach！

将此更新为所选答案。谢谢！

干得好。感谢您及时了解并更改已接受的答案。

相关wiki文档：github.com/adobe-photoshop/generator-core/wiki/…

@Tzach 如何从 svg 图像生成可绘制矢量的字符串

【参考方案2】：

在 Photoshop 中选择并复制路径 启动 Adob​​e Illustrator 创建一个新文档 粘贴 另存为 SVG

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

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

如果你在Photoshop中已经有了路径，并且没有Illustrator，我能想到的最好的方法是在Photoshop中打开信息面板，一次选择一个路径点并手动记录点的位置本身以及它的句柄，并从那些手动创建路径使用absolute curveto commands, 'C'（用于有句柄的点）和absolute lineto commands, 'L' 用于那些没有句柄的点。

【讨论】：

谢谢！我目前没有加载 Illustrator，但我可能可以访问它。保存为 SVG 后，它会给我简写字符串命令吗？

@WillHaynes 是的，Illustrator 会保存有效的 SVG，并且路径将使用简洁的 curveto 和 lineto 命令创建具有 d 属性的 <path> 元素。

我对手动执行此操作感到恼火，因此我创建了一个 PS 脚本，它会自动为您将图层导出为 SVG（前提是您已安装 Ill.）。 hackingui.com/design/export-photoshop-layer-to-svg

【参考方案3】：

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

【讨论】：

这对我有用，谢谢！具体来说，对于我正在处理的内容，我可以使用矢量图层，右键单击 -> 转换为智能对象，右键单击 -> 编辑内容，在新的 Photoshop 文档选项卡中打开，然后另存为.. . 到 EPS。

【参考方案4】：

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

http://adobe.com/go/extract_tryitnow_en

您所要做的就是上传/拖放/您的 .psd 文件，选择路径层并下载为 svg。您可以提取 svg 路径，尤其是 d 属性。

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

【参考方案5】：

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

【讨论】：

这个答案对我很有帮助！