All Projects → elrumordelaluz → Outline Stroke

elrumordelaluz / Outline Stroke

Convert stroked SVG into the outlined version

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Outline Stroke

Svgsprit.es
Public endpoint to generate SVG Sprites
Stars: ✭ 73 (-9.88%)
Mutual labels:  svg
Iconify Sketch
Sketch plug-in for importing over 70,000 icons from 80+ icon sets, including Material Design Icons, FontAwesome, Jam Icons, Open Emoji and many others.
Stars: ✭ 76 (-6.17%)
Mutual labels:  svg
Waveforms
An interactive, explorable explanation about the peculiar magic of sound waves.
Stars: ✭ 1,218 (+1403.7%)
Mutual labels:  svg
Cl Aristid
Draw Lindenmayer Systems with Common LISP!
Stars: ✭ 74 (-8.64%)
Mutual labels:  svg
Svg Loaders React
React adaptation of the SVG Loaders library by Sam Herbert
Stars: ✭ 75 (-7.41%)
Mutual labels:  svg
Svg To Compose
Converts SVG and Android Vector Drawable in Jetpack Compose code
Stars: ✭ 76 (-6.17%)
Mutual labels:  svg
React Bootstrap Icons
React component for Bootstrap Icons
Stars: ✭ 71 (-12.35%)
Mutual labels:  svg
Svg Autocrop
🚗🌽🔳An NPM module to autocrop and slim down SVGs
Stars: ✭ 80 (-1.23%)
Mutual labels:  svg
Personal Goals
List of books I've read, projects I've done, videos I've seen, articles I've read or podcasts I've listened to.
Stars: ✭ 75 (-7.41%)
Mutual labels:  svg
Goat
Annotate Images (or goats) On The Web™
Stars: ✭ 78 (-3.7%)
Mutual labels:  svg
Svg Fill Loader
DEPRECATED, use https://github.com/kisenka/svg-mixer/tree/master/packages/svg-transform-loader instead
Stars: ✭ 74 (-8.64%)
Mutual labels:  svg
Nivo
nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
Stars: ✭ 9,550 (+11690.12%)
Mutual labels:  svg
Vue Flow Editor
Vue + Svg 实现的flow可视化编辑器
Stars: ✭ 77 (-4.94%)
Mutual labels:  svg
Sozi
A "zooming" presentation editor
Stars: ✭ 1,185 (+1362.96%)
Mutual labels:  svg
Twelvemonkeys
TwelveMonkeys ImageIO: Additional plug-ins and extensions for Java's ImageIO
Stars: ✭ 1,221 (+1407.41%)
Mutual labels:  svg
Maker.js
📐⚙ 2D vector line drawing and shape modeling for CNC and laser cutters.
Stars: ✭ 1,185 (+1362.96%)
Mutual labels:  svg
Namedavatar
SVG Avatar generated by name text
Stars: ✭ 76 (-6.17%)
Mutual labels:  svg
Pictogrify
🎭 Generate unique pictograms from any text
Stars: ✭ 80 (-1.23%)
Mutual labels:  svg
Dashed Border Generator
Custom Dashed Border | Online CSS Generator 🚀
Stars: ✭ 79 (-2.47%)
Mutual labels:  svg
React Image Timeline
📆 An image-centric timeline component for React.js
Stars: ✭ 77 (-4.94%)
Mutual labels:  svg

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

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].