https://github.com/elrumordelaluz/outline-stroke

Convert stroked SVG into the outlined version
https://github.com/elrumordelaluz/outline-stroke

outline-stroke stroke svg svg-path

Last synced: 4 days ago
JSON representation

Convert stroked SVG into the outlined version

• Host: GitHub
• URL: https://github.com/elrumordelaluz/outline-stroke
• Owner: elrumordelaluz
• Created: 2017-11-30T11:51:17.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-04-14T17:57:48.000Z (over 1 year ago)
• Last Synced: 2024-10-28T13:10:35.761Z (16 days ago)
• Topics: outline-stroke, stroke, svg, svg-path
• Language: JavaScript
• Homepage: https://outline-stroke.vercel.app/
• Size: 912 KB
• Stars: 126
• Watchers: 3
• Forks: 7
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  





  Sometimes you need an svg image that have stroked attributes in its

  paths but outlined like after applying Outline Stroke in Adobe Illustrator or Convert to Outlines in SketchApp





  

    

  



## Install

```zsh

yarn add svg-outline-stroke

```

## Usage

> **Note to output quality:** Consider that svg-outline-troke traces the outline version from a bitmap copy of the input so, bigger is the input, most accurate is the traced version (also with lot more path points). If the output quality is insufficient simply provide a larger scaled SVG into the tool (see width, height and viewBox attributes).

`String` input:

```js

const outlineStroke = require('svg-outline-stroke')

const strokedSVG = `

  

  

`

outlineStroke(strokedSVG).then(outlined => {

  console.log(outlined)

})

```

`Buffer` input:

```js

const fs = require('fs')

const outlineStroke = require('svg-outline-stroke')

fs.readFile('./source.svg', (err, data) => {

  if (err) throw err

  outlineStroke(data).then(outlined => {

    fs.writeFile('./dest.svg', outlined, err => {

      if (err) throw err

      console.log('yup, outlined!')

    })

  })

})

```

## Params

The second argument accepts `params` to apply directly when re-tracing the image, like `fill` color of the `path`, `background` and so on. Take a look into [potrace params](https://github.com/tooolbox/node-potrace#parameters)

```js

outlineStroke(strokedSVG, { color: '#bada55' }).then(outlined => {

  console.log(outlined, 'Outlined SVG with #bada55 `fill` color')

})

```

## Related

[micro-outline-stroke](https://github.com/elrumordelaluz/micro-outline-stroke)

Microservice with a public [endpoint](https://outline-stroke.vercel.app/)

[outline-stroke-cli](https://github.com/elrumordelaluz/outline-stroke-cli) CLI version