How to import SVG shapes through ShapePath?

[eeegor]

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!

[dbanksdesign]

For converting an SVG path to Sketch's points, there is no converter built to handle that (at least not in this library). Building one, I think, would be relatively straightforward though.

For you second point, placing raw Sketch JSON into a model class like ShapePath, you will need to pass it in as the 2nd argument. The model constructors are written such that the first argument is used if you are generating a model in code like:

const myShape = new ShapePath({
  points: [],
  x: 100,
  y: 100,
  width: 100,
  height: 100,
});

If you are passing through raw Sketch JSON like above you would do:

const myShape = new ShapePath(null, { /* .. */ });

This is so that building models in JS is easier than writing raw Sketch JSON by hand, but if you have are starting with an existing Sketch file, it will instantiate the classes with the raw JSON.

Hope that helps! Let me know if you have any other questions.

[L2jLiga]

Hi there!
We use "paper" to parse SVG path to points and then on our code we transform points coordinates from absolute to relative, hope this helps :)

[randombitsUK]

Similar to @eeegor we have a bunch of (~400) svgs that I'd like to bring into a sketch library file. However I'm hitting issues in trying to determine how to get the svg data into the appropriate points format.

For instance

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill-rule="evenodd" d="M16 17.5a7.878 7.878 0 0 1-8-7.75A7.878 7.878 0 0 1 16 2a7.878 7.878 0 0 1 8 7.75 7.878 7.878 0 0 1-8 7.75ZM2 30c0-5.883 7.519-10 14.014-10C22.48 20 30 24.12 30 29.994c0 .005-28 .007-28 .005Z"/></svg>

So far I've tried 'svg-points' and 'wilderness-dom-node', and when I import the points they provide into sketch I'm finding it just crashes sketch.

        const shapeData = frameShape(document.querySelector('path'));

// Example points data
//    [
//    { x: 16, y: 17.5, moveTo: true },
//    { curve: [Object], x: 8, y: 9.75 },
//    { curve: [Object], x: 16, y: 2 },
//    { curve: [Object], x: 24, y: 9.75 },
//    { curve: [Object], x: 16, y: 17.5 },
//    { x: 2, y: 30, moveTo: true },
//    { curve: [Object], x: 16.014, y: 20 },
//    { curve: [Object], x: 30, y: 29.994 },
//    { curve: [Object], x: 2, y: 29.999 },
//    { x: 2, y: 30 }
//    ]

        const myShape = new ShapePath({
            points: shapeData.points,
            width: icon.size.width,
            height: icon.size.height,
            x,
            y,
        });

@L2jLiga Are you able to show how you're using paper, looking through the documentation I'm not seeing how! :)

@dbanksdesign You said a converter to Sketch's point should be relatively forward. Can you provide any pointers?

[eeegor]

Please have a look here: https://github.com/telekom/scale/tree/main/packages/generator-sketch a while ago my team build a sketch generator which parses the svgs into sketch. It’s not straightforward at all, quite some heavy lifting. Should be somewhere in the repo 🙂