pixelated-svg

Create SVG vector image from raster image with keeping pixeleated visual.

Functions

fromPng

Create SVG document from PNG file. Asynchronous function. Returns Promise. See also Options.

const svg = require('pixelated-svg');
svg.fromPng('foobar.png').then(svg => {
    console.log(svg);
    // <?xml version="1.0"?><!DOCTYPE svg ...
  });

NOTE: This package is targeting small raster images (like classic game resources). If very huge and colorful images is specified, it might take a long computing time or raise memory insufficient error.

Options

Some options are prepared for fromPng.

scale

By default, scale is 1, so output SVG size equals with source raster image size. For example, if source image has 8 pixel width, SVG width becomes 8.

Specify scaling factor by scale option to change SVG size.

svg.fromPng('8x8.png', {
  scale: 100,
}).then(...); // becomes 800 x 800 SVG

includeColors, excludeColors

Specify RGBA colors to include or exclude.

The following example picks only RED and CYAN to generate SVG. All other colors to be treated as transparent and no path drawn.

const RED  = [171,  70,  66, 255];
const CYAN = [124, 175, 194, 255];
svg.fromPng('colorful.png', {
  includeColors: [ RED, CYAN ],
}).then(...);

excludeColors works as reverse option of includeColors, so if change includeColors of the above example to excludeColors, only RED and CYAN colors goes transparent and all other colors are included.

If both includeColors and excludeColors are specified, only colors satisfying both conditions are selected. Therefore, only CYAN will be selected on the following example.

svg.fromPng('colorful.png', {
  includeColors: [ RED, CYAN ],
  excludeColors: [ RED, ]
}).then(...);

Finally, special selector syntax are avaiable for both includeColors and execludeColors:

• Wildcard (*)
• Equality (==)
• Inequalities (!=, <=, <, >=, >)

For example,

const selector = ['< 249', '>= 35', 156, '*'];
svg.fromPng('rgb.png', {
  includeColors: [ selector ],
}).then(...);

This can select colors that satisfy the next conditions:

• R < 249
• B >= 35
• G == 156
• A can be any value

CLI

Command line interface will be available when globally installed. (npm install -g pixelated-svg)

pixelated-svg raster.png --scale 100 > out.svg

Command line options correspond with fromPng options:

• --scale or -s
  • Corresponds with scale.
• --include, -i, --exclude, -e (Experimental)
  • Correspond with includeColors and excludeColors options
  • Syntax must be "exact" JSON Array format. (eg. -i "[[171, 70, 66, 255]]").
    • This inconvenient constraint will be change later.

License

MIT License

(C) 2017 Retorillo