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
yarn add svg-outline-strokeNote 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:
const outlineStroke = require('svg-outline-stroke')
const strokedSVG = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<line x1="32" y1="16" x2="32" y2="48" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2"/>
<line x1="48" y1="32" x2="16" y2="32" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2"/>
</svg>`
outlineStroke(strokedSVG).then(outlined => {
console.log(outlined)
})Buffer input:
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!')
})
})
})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
outlineStroke(strokedSVG, { color: '#bada55' }).then(outlined => {
console.log(outlined, 'Outlined SVG with #bada55 `fill` color')
})micro-outline-stroke Microservice with a public endpoint
outline-stroke-cli CLI version