svg-outline-stroke

Transfrom svg strokes into filled paths

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
svg-outline-stroke
123141.3.13 years ago6 years agoMinified + gzip package size for svg-outline-stroke in KB

Readme

Outline Stroke


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


<img src="https://travis-ci.org/elrumordelaluz/outline-stroke.svg?branch=master" alt="Build Status">

Install

yarn add svg-outline-stroke

Usage

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