node package manager
Stop wasting time. Easily manage code sharing in your team. Create a free org »

image-trace-loader

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.

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