Photoshop 自定义形状到 SVG 路径字符串
有什么方法可以从 Photoshop 自定义形状或路径中获取 SVG 路径字符串吗?或者还有其他方法来获取/构建类似的数据吗?我想做类似的事情:
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:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
更新:在最新版本的 Photoshop 中,有一个内置选项可将图像导出为 SVG,该选项适用于路径和自定义形状。只要这样做:
原始答案:
从 Photoshop CC 14.2 开始,您可以直接从 Photoshop 创建 SVG 文件:
generator.json
的文件,其中包含以下内容。.svg
。Generator.json 的内容:
来源: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:
Original Answer:
Starting from Photoshop CC 14.2, you can create SVG files directly from Photoshop:
generator.json
with the content below in your user home folder.<something>.svg
.Content for generator.json:
Source: http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/
如果您有 Illustrator 但尚未创建所有路径,那么直接在 Illustrator 中创建它们可能会更容易。
如果您没有 Illustrator,您最好使用免费的 Inkscape SVG 编辑器来绘制路径。
如果您已经在 Photoshop 中拥有路径,并且没有 Illustrator,我能想到的最好的方法是打开 Photoshop 中的信息面板,一次选择一个路径点,并手动记录该点本身的位置作为其句柄,并使用 绝对 curveto 命令“C”(对于有句柄的点)和 绝对 lineto 命令,'L' 对于那些没有句柄的点手柄。
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.
另一种选择是在 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
所有答案都很好,但对我来说太多了,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 ag
element, then scaledg
and translated thepath
对于自定义形状,您可能需要查看最近发布的名为 将自定义形状文件转换为 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.