npm

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.

NameTypeDefaultDescription
turnPolicy{String}TURNPOLICY_MINORITYHow 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}100Suppress speckles of up to this size. Larger values significantly reduce the size of the traced outline
alphaMax{Number}1Corner threshold parameter. Lower values results in rougher edges, but significantly reduces the size of the traced outline
optCurve{Boolean}trueCurve optimization
optTolerance{Number}0.2Curve optimization tolerance
threshold{Number\|String}THRESHOLD_AUTOThreshold 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}falseSpecifies whether fill color and background color should be swapped
color{String}COLOR_AUTOFill color. COLOR_AUTO will extract and use the most prominent color of the source image
background{String}COLOR_TRANSPARENTBackground color
skipTraceIfBase64{Boolean}falseIf 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