amzn / amzn/sketch-constructor
How to import SVG shapes through ShapePath?
- Dominant language
- JavaScript
- Stars
- 542
- Forks
- 45
- PR merge metrics
- No merged PRs in 30d
Description
I'm trying to import an `svg` file with `ShapePath` and was wondering how this is working.
What's the way to convert a `svg path` to `points`?
When reading a `Sketch` file with a `svg` inside the point structure looks like this:
```
{
frame: {
_class: 'rect',
constrainProportions: false,
height: 54,
width: 128,
x: 0,
y: 37.5
},
points: [
{
_class: 'curvePoint',
cornerRadius: 0,
curveFrom: '{0.57812500000000033, 0}',
curveMode: 1,
curveTo: '{0.57812500000000033, 0}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{0.57812500000000033, 0}'
},
{
_class: 'curvePoint',
cornerRadius: 0,
curveFrom: '{1.0000000000000004, 0.49999999999999972}',
curveMode: 1,
curveTo: '{1.0000000000000004, 0.49999999999999972}',
hasCurveFrom: false,
hasCurveTo: false,
point: '{1.0000000000000004, 0.49999999999999972}'
},
...
]
}
```
When I place this within `new ShapePath({...the example goes here})` I get the shape into `Sketch` but the frame size is `0,0`, so when I manually resize it to `128, 54`, and give it a `fill` color it appears to be correct.
The background is that I have a collection of `svg` icons I would like to place on an `Artboard`, so I'm looking for a way to automatically convert all files into the proper format.
Thanks!
Contributor guide
Research direction
Start by reading the ShapePath API and the existing SVG and Sketch shape representations shown in the issue. Trace how points, frame dimensions, and fill data are accepted when creating a ShapePath. Done means an SVG path can be converted into the required point structure and placed on an Artboard with the correct frame size and visible fill.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100