amzn / amzn/sketch-constructor

How to import SVG shapes through ShapePath?

Open
#86 4 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.