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: about 1 year 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 (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-14T17:57:48.000Z (about 3 years ago)
- Last Synced: 2025-04-08T19:38:54.934Z (about 1 year ago)
- Topics: outline-stroke, stroke, svg, svg-path
- Language: JavaScript
- Homepage: https://outline-stroke.vercel.app/
- Size: 912 KB
- Stars: 129
- Watchers: 2
- 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