anemy/svgurt

Image -> SVG Vectorizing Tool - Live at:

Svgurt ·

Svgurt is a configurable, interactive image to SVG converting tool.

Usage

Installation

Install svgurt using NPM, and add it to your package.json dependencies:

npm install svgurt --save

Svgurt can then be used from the command line or programmatically as a module.

Using Svgurt Programatically

Svgurt can be used with node js.

ES5 module:

const svgurt = require('svgurt');

ES6 module:

import svgurt from 'svgurt';

Next call svgurt with a config object:

const config = {
  input: "someImage.jpg",
  output: "output file name",
  blur: 2
};

svgurt(config);

CLI

Full docs can be found in the CLI Documentation.

To run svgurt from command line, navigate to the folder where you have installed it using npm (or anywhere if you use the -g flag). Then run svgurt by supplying a config file: svgurt config.json. Config documentation.

Default Config

When using Svgurt programatically or through the command line, you need to supply a config. Any fields in your configuration that are omitted will default to the following:

{
  input: 'image.jpg', // This can be an array of input file names as well. jpg and png are both supported.
  output: 'svgurt-output', // This is the name of the file svgurt will save to if 'returnSVGString' is 'false'. It will also accept an array sequentially coupled with 'input'.
  returnSVGString: false, // When true the cli or module will return the svg output as a string instead of saving to a file.
  
  // Image Controls
  blur: 0,
  grayscale: false,
  invert: false,
  'Edge Detection': false,
  postBlur: 0,
  posterize: false,
  posterizeLevels: 5,
  lowThreshold: 20,
  highThreshold: 50,
  applyFractalField: false,
  fieldOpacity: 0.5,
  fieldRatioX: 0.01,
  fieldRatioY: 0.01,
  fieldRandomSeed: 9661,

  // SVG Controls
  amplitude: 5,
  amplitudeRandomness: 0.5,
  amountOfLines: 150,
  continuous: false,
  crossHatch: true,
  direction: 30,
  directionRandomness: 0.01,
  displaceOrigin: false,
  lineLength: 6,
  lengthOnColor: true,
  lengthRandomness: 0.2,
  minColorRecognized: 50,
  maxColorRecognized: 200,
  maxRecursiveDepth: 150,
  minLineLength: 1,
  randomSeed: 1011,
  radius: 1.5,
  radiusOnColor: true,
  radiusRandomness: 0.25,
  recursiveAlgorithm: 'fifth', // One of 'first', 'second', 'third', 'fourth', or 'fifth'.
  renderEveryXPixels: 5,
  renderEveryYPixels: 5,
  scale: 1,
  startAtCenterOfShapes: false,
  strokeColor: 'rgb(28, 32, 38)',
  strokeWidth: 1,
  strokeWidthRandomness: 0.1,
  svgRenderType: 'RECURSIVE', // One of: 'CIRCLE', 'CURVE', 'LINE', 'RECURSIVE', or 'CONCENTRIC'.
  wavelength: 3,
  wavelengthRandomness: 0.5,
  waves: 3,
  wavesRandomness: 0.5,
  applyFractalDisplacement: false,
  displacementAmount: 5,
  fractalRatioX: 0.01,
  fractalRatioY: 0.01,
  fractalRandomSeed: 9996,
  autoColor: false,
  circleArcs: 200,
  intensityWeight: 100000,
  radiusStep: '5'
}

Local Development of Svgurt

Installation

Install node js from https://nodejs.org/en/download/

$ # Clone this repo and navigate to the cloned folder.
$ npm install

Development

$ npm start
$ browser https://localhost:3000

If you'd like to see something added, create an issue or make a PR! 🚀

License

Svgurt is MIT licensed.

svgurt's Issues

svgRenderType change creates new outputScale field

When the svgRenderType pulldown is used, a new outputScale field is being added to the interface panel http://www.giphy.com/gifs/7JaHZgW32gFeWMAOFx

Inversion problem

Hi and thanks again for a fun and useful tool. I am seeing the resultant image invert in many instances, when invert is not selected and can't seem to find settings to correct.

svgRenderType : Trace

Hi, I'm having trouble getting any result using the trace render type programmatically, I noticed that its not listed in the cli.
is this feature supported outside of the live demo?
my config is as follows

{
"input": ".\test\in\amanocollp3.jpg",
"output": "C:/Users/Willard/svgurt/middle/amanocollp3.jpgoutline2",
"Edge Detection": "true",
"lowThreshold": "128",
"highThreshold": "128",
"Edge Detection": "true",
"lowThreshold": "128",
"highThreshold": "128",
"svgRenderType": "TRACE",
"noiseSize": "45",
"fill": "false",
"stroke": "true",
"directionRandomness": "0.04828301190198645",
"applyFractalDisplacement": "true",
"displacementAmount": "6",
"fractalRandomSeed": "28221",
"strokeWidth": ".085"
}

Glitch effect doesn't persist in downloaded image

Looks like this step happens after we generate the image.

Resultant SVG has partial duplicates left and right

Thank you, Anemy, for this awesome, versatile tool! I am noticing that parts of my image are duplicated to the left and right of the exported SVG. Minor issue, but does mean the SVGs have to be manually edited before plotting.

Doc: no license specified

Please specify the license applying - I couldn't find a file or mention in the source (Pref NOT GPL).

Very cool lib!