Layer-to-svg NPM

node: v18.20.4

Sketch to SVG

Exports layers from a .sketch file to an svg, without needing Sketch installed.

Usage as a command

Installation

Install globally npm i layer-to-svg -g

Or install locally npm i layer-to-svg (or checkout this repo) and then npm link (to enable the layer-to-svg command in the terminal)

Function

layerToSvg

将json layer转为svg，通过遍历json，使用paper进行svg计算，sketch shape->svg很有用

layer: sketch layer的json对象
options: node运行时sketch的地址和文件优化配置，web运行时暂不用配置
sketchfileData: web运行时，传入使用JSZip解压sketch后的zipinfo对象，node运行时不需要
getArraybuffer: web运行时，获取文件对象使用的buffer方法，配合jszip api

example=>example.js

// web例子
const beforeUpload = async (info: any) => {
    let sketchJson = null;
    try {
      const zip = new JSZip();
      const zipInfo = await zip.loadAsync(info);
      const getArraybuffer = async (name: string) => {
        if(zipInfo.files[name]){
          return await zip.file(name)?.async("arraybuffer")
        }
        return undefined
      }
    }catch(e){}
}

formatSketchJson

格式化sketch json，将不规则图形挑出来，转换为svg对象，svg对象以_class="svg",svg="svg code"形式创建

example=>test.js

canvas安装

https://www.npmjs.com/package/canvas

不同环境需要提前安装相关工具包： Mac Os中可以使用 Homebrew 执行命令 brew install pkg-config cairo pango libpng jpeg giflib librsvg