JS that creates a shape layer from an SVG containing a path
- April 29, 2024
- 1 reply
- 267 views
I have created a script that allows us to select an SVG file to draw a shape layer, and am now sharing it with the community. I've attached it in txt format.
Instructions
- Change the file extension to "jsx" and run in Photoshop (after reviewing for security, of course).
- When prompted select the SVG file containing the path you want drawn as a shape layer.
- The activeDocument (or a new document) will have a shape layer name "Shape Guide" from the first <path> in the SVG. There will also be a Photoshop pathItem which is created in an intermediate step. You can delete it if you wish.
Integration
There are two main functions: SvgPath and MakeSvgShape. SvgPath parses the SVG and creates the pathItem. MakeSvgShape calls SvgPath and creates a shape layer from the resulting pathItem. Here are examples:
// to make the pathItem and shape layer
var lyr = MakeSvgShape({
name: 'My Shape Name',
source: svgFileOrCode,
strokeSize: 3,
strokeColor: foregroundColor
})
// to only make the pathItem
var pathItem = SvgPath({
name: 'My Path Name',
source: svgFileOrCode
})The pathItem name will have the date appended to prevent failures due to duplicate names.
There are also some helper functions for alignment because the path will be created at coordinates converted from the SVG, which may not align with the active document. They can be removed with minor editing if you want to preserve that positioning.
Improvements
There are a few areas I know of that could be improved. These fell below the line on my project:
- Support for elliptical svg arcs ('A' or 'a' commands)
- More stroke options like corner type, miter, etc.
