Working with SVG Paths in Framer
Josh Puckett
32610

Hi,

The plugin does not appear to work on latest version of sketch (39.1 at time of writing this), however, I have found this works OK …

First I had to make sure the shape had an origin of 0,0 (move to top left of artboard) and then …

… which produces …

<svg width=”55px” height=”55px” viewBox=”-2 -2 55 55" version=”1.1" xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink">
 <! — Generator: Sketch 39.1 (31720) — http://www.bohemiancoding.com/sketch
 <desc>Created with Sketch.</desc>
 <defs></defs>
 <path d=”M25.5,51 C39.5832611,51 51,39.5832611 51,25.5 C51,11.4167389 39.5832611,0 25.5,0 C11.4167389,0 0,11.4167389 0,25.5 C0,39.5832611 11.4167389,51 25.5,51 Z” id=”Oval-2" stroke=”#7ED321" stroke-width=”3" fill=”none”></path>
</svg>

… and to work with framer, it appears that you just need to extract the path element from above …

layer = new SVGLayer
 path: ‘<path d=”M25.5,51 C39.5832611,51 51,39.5832611 51,25.5 C51,11.4167389 39.5832611,0 25.5,0 C11.4167389,0 0,11.4167389 0,25.5 C0,39.5832611 11.4167389,51 25.5,51 Z” id=”Oval-2" stroke=”#7ED321" stroke-width=”3" fill=”none”></path>’

Cheers,

Richard