Image Trace Loader

Loads images and exports traced outlines as image/svg+xml URL-encoded data

Install

npm install --save-dev image-trace-loader

Inspiration

I saw Mikael Ainalem's fantastic CodePen showcasing this technique, and I wanted a way to automate the process.

Usage

The image-trace-loader loads your image and exports the url of the image as src and the image/svg+xml URL-encoded data as trace.

import { src, trace } from './image.png';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(gif|png|jpe?g)$/i,
        use: [
          {
            loader: 'image-trace-loader'
          }
        ]
      }
    ]
  }
}

It can also be used in conjunction with url-loader or file-loader.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(gif|png|jpe?g)$/i,
        use: [
          {
            loader: 'image-trace-loader'
          },
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

Options

The loader options allows you to specify values for all the parameters of the Potrace class, with the addition of skipTraceIfBase64.

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |turnPolicy|{String}|TURNPOLICY_MINORITY|How to resolve ambiguities in path decomposition. Possible values are TURNPOLICY_BLACK, TURNPOLICY_WHITE, TURNPOLICY_LEFT, TURNPOLICY_RIGHT, TURNPOLICY_MINORITY, TURNPOLICY_MAJORITY. Refer to page 4 of this document for more information| |turdSize|{Number}|100|Suppress speckles of up to this size. Larger values significantly reduce the size of the traced outline| |alphaMax|{Number}|1|Corner threshold parameter. Lower values results in rougher edges, but significantly reduces the size of the traced outline| |optCurve|{Boolean}|true|Curve optimization| |optTolerance|{Number}|0.2|Curve optimization tolerance| |threshold|{Number\|String}|THRESHOLD_AUTO|Threshold below which the color is considered color. Should be a number in range 0..255 or THRESHOLD_AUTO in which case threshold will be selected automatically using Algorithm For Multilevel Thresholding | |flipColors|{Boolean}|false|Specifies whether fill color and background color should be swapped| |color|{String}|COLOR_AUTO|Fill color. COLOR_AUTO will extract and use the most prominent color of the source image| |background|{String}|COLOR_TRANSPARENT|Background color| |skipTraceIfBase64|{Boolean}|false|If set to true, will not generate a traced outline if the image already is base64 encoded. Useful when the inlined base64 representation is enough, and you don't want to bloat your files with unused traces|