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

发布于 2024-10-25 13:07:13 字数 175 浏览 11 评论 0原文

有什么方法可以从 Photoshop 自定义形状或路径中获取 SVG 路径字符串吗?或者还有其他方法来获取/构建类似的数据吗?我想做类似的事情:

http://raphaeljs.com/icons/

Is there any way to get the SVG path string off a Photoshop custom shape or path? Or is there another way to get/construct similar data? I'm looking to do something similar to this:

http://raphaeljs.com/icons/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

南渊 2024-11-01 13:07:13

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

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

原始答案:

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

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

Generator.json 的内容:

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

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

Update: in recent versions of Photoshop, there is a built-in option to export the image as SVG, which works well on paths and custom shapes. Just do:

File -> Export -> Export as... and select SVG in the file settings.

Original Answer:

Starting from Photoshop CC 14.2, you can create SVG files directly from Photoshop:

  1. Create a file named generator.json with the content below in your user home folder.
  2. Restart Photoshop and open your PSD file.
  3. Activate the generator: File > Generate > Image Assets.
  4. Rename your layer to <something>.svg.
  5. The svg file will be created in the assets directory next to your PSD file.

Content for generator.json:

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

Source: http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/

骑趴 2024-11-01 13:07:13
  1. 在 Photoshop 中选择并复制路径
  2. 启动 Adob​​e Illustrator
  3. 创建新文档
  4. 粘贴
  5. 另存为 SVG

如果您有 Illustrator 但尚未创建所有路径,那么直接在 Illustrator 中创建它们可能会更容易。

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

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

  1. Select and copy the path in Photoshop
  2. Launch Adobe Illustrator
  3. Create a new Document
  4. Paste
  5. Save as SVG

If you have Illustrator and have not created all the paths, however, it is probably easier to create them directly in Illustrator.

If you do not have Illustrator, you are probably better off using the free Inkscape SVG editor to draw your paths.

If you do already have the paths in Photoshop, and do not have Illustrator, the best I can think of is to turn on the Info palette in Photoshop select the path points one at a time and manually record the positions of the point itself as well as its handles, and from those manually create the path using absolute curveto commands, 'C' (for the points with handles) and absolute lineto commands, 'L' for those points that have no handles.

燃情 2024-11-01 13:07:13

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

Another option is to save the file as EPS in photoshop making sure to have export vectors checked, and then loading that into illustrator and saving as SVG

百善笑为先 2024-11-01 13:07:13

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

http://adobe .com/go/extract_tryitnow_en

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

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

All answers were good, but for me they were too much, there is an online tool provided by Adobe:

http://adobe.com/go/extract_tryitnow_en

All you have to do is upload /drag & drop/ your .psd file, choose the path layer and download as svg. And you can extract the svg path, d attribute in particular.

Then what I did is put the path into a g element, then scaled g and translated the path

寻找一个思念的角度 2024-11-01 13:07:13

对于自定义形状,您可能需要查看最近发布的名为 将自定义形状文件转换为 SVG 集(适用于 Photoshop CS3 或更高版本),用于转换自定义形状文件 (. csh)或自定义形状首选项文件(CustomShapes.psp)转换为一组 SVG 文件。

For custom shapes, you may want to have a look at the recently released open-source script called Convert Custom Shapes File to SVG Set (for Photoshop CS3 or later), used to convert a custom shapes file (.csh) or a custom shapes preferences file (CustomShapes.psp) into a set of SVG files.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文