Outline Stroke Save

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

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:

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!')
    })
  })
})

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

outlineStroke(strokedSVG, { color: '#bada55' }).then(outlined => {
  console.log(outlined, 'Outlined SVG with #bada55 `fill` color')
})

Related

micro-outline-stroke Microservice with a public endpoint

outline-stroke-cli CLI version