# sketch-to-svg

> Convert layers in a Sketch file to SVG

Latest version **1.2.0** (published 2024-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install sketch-to-svg
pnpm add sketch-to-svg
yarn add sketch-to-svg
bun add sketch-to-svg
```

Provides the command `sketch-to-svg`.

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2024-07-18 |
| First published | 2020-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 611.9 KB |
| Known vulnerabilities | 0 (+3 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Design Operations Collective |
| Maintainers | atomoil, kerrmarinmiller |

## Links

- npm: https://www.npmjs.com/package/sketch-to-svg
- Repository: https://github.com/design-ops/sketch-to-svg
- Homepage: https://github.com/design-ops/sketch-to-svg#readme
- Issues: https://github.com/design-ops/sketch-to-svg/issues
- npm.io page: https://npm.io/package/sketch-to-svg

## Dependencies (11)

- [uuid](https://npm.io/package/uuid.md) ^10.0.0
- [sharp](https://npm.io/package/sharp.md) ^0.33.4
- [yargs](https://npm.io/package/yargs.md) ^17.5.1
- [canvas](https://npm.io/package/canvas.md) ^2.6.1
- [@types/uuid](https://npm.io/package/@types/uuid.md) ^10.0.0
- [extract-zip](https://npm.io/package/extract-zip.md) ^2.0.1
- [paper-jsdom](https://npm.io/package/paper-jsdom.md) 0.12.18
- [@types/sharp](https://npm.io/package/@types/sharp.md) ^0.32.0
- [xml-formatter](https://npm.io/package/xml-formatter.md) ^3.6.3
- [sketch-constructor](https://npm.io/package/sketch-constructor.md) ^1.24.2
- [source-map-support](https://npm.io/package/source-map-support.md) ^0.5.19

## Recent versions

- 1.2.0 (latest) — 2024-07-18
- 1.1.0 — 2022-05-20
- 1.0.2 — 2020-05-11
- 1.0.1 — 2020-03-26

## README

# 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 sketch-to-svg -g` 

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

### Examples

* Export all layers on all pages from my-design.sketch into an 'svg-output' folder in the current folder:
    * `sketch-to-svg ./my-design.sketch` 
* Export all layers on all pages from my-design.sketch into the /specific/svg/location/ folder:
    * `sketch-to-svg ./my-design.sketch ./specific/svg/location/`
* Export all layers from 'Page 1' and 'Page 2' from my-design.sketch into an 'svg-output' folder in the current folder:
    * `sketch-to-svg -p 'Page 1' -p 'Page 2' ./my-design.sketch`

### Documentation

Just running `sketch-to-svg` will output the help:
```
export svg from sketch

Positionals:
  sketch  path to the sketch file                                       [string]
  output  output folder - defaults to the current folder
                                             [string] [default: "./svg-output/"]

Options:
  --version    Show version number                                     [boolean]
  --help       Show help                                               [boolean]
  --pages, -p  pages to export (default is all pages)```

## Usage as a library

```javascript
/// At the moment you need to pass in a sketch-constructor layer.
const { Sketch } = require('sketch-constructor')

/// Require the library
const svg = require('sketch-to-svg')

// Open the sketch file and pass in the layer you want to extract
let absolutePath = `${process.cwd()}` + "/mysketchfile.sketch"
Sketch
        .fromFile(absolutePath)
        .then(sketch => {
          /// Get the layer you want to extract - this example extracts the first layer in the first page
          let layer = sketch.getPages()[0].layers[0]

          let options = { sketchFilePath: absolutePath, optimizeImageSize: true, optimizeImageSizeFactor: 3 }

          return svg.createFromLayer(layer, options)
        })
        .then(icon => {
          // For this example, we just dump the svg to the console
          console.log(icon.svg)
        })
        .catch(err => {
            console.log("Failed to create svg:", err)
        })
```

You can see this example in action by checking out the repo and running `node example.js`.

## Development

This is written in Typescript, there's an npm script (`build`) which will build the library into the dist folder, and a script (`npm start`) which will 
run through a few test/example sketch files, exporting them into /out.

If things are going _really_ badly, you can run `npm run clobber` to start from the start again. This will remove all built code, and all node modules. You'll then have to run `npm install` again :)

---
_Source: https://npm.io/package/sketch-to-svg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._