gulp-svg-multitool

Table of contents

• Install
• Usage
• Examples
  • PNG fallbacks
  • Symbols mode
  • Custom filenames
  • Previews
• Post Processing
• Options
• License

Install

Install it locally to your project.

$ npm install --save-dev gulp-svg-multitool

Usage

var svgMultitool = require("gulp-svg-multitool");

gulp.task('multitool', function () {
    return gulp.src('*.svg')
        .pipe(svgMultitool())
        .pipe(gulp.dest("out"));
});

This will generate the following output files:

1. svg-atlas.svg - Single optimized SVG containing all of your source SVGs
2. svg-data.json - SVG data arranged in JSON format

Examples

PNG fallbacks

You can easily generate png files from your source svgs.

var config = {
  pngFallback: true
};

gulp.task('multitool', function () {
    return gulp.src('*.svg')
        .pipe(svgMultitool(config))
        .pipe(gulp.dest("out"));
});

Symbols mode

To get output SVG data as this CSS Tricks article outlines.

var config = {
  symbols: true
};

gulp.task('multitool', function () {
    return gulp.src('*.svg')
        .pipe(svgMultitool(config))
        .pipe(gulp.dest("out"));
});

Custom filenames

You can also change the generated filenames.

var config = {
  atlasFile: "output.svg",        /* SVG filename */
  previewFile: "output.html",     /* Preview filename */
  jsonFile: "output.json"         /* JSON filename */
};

gulp.task('multitool', function () {
    return gulp.src('*.svg')
        .pipe(svgMultitool(config))
        .pipe(gulp.dest("out"));
});

Previews

An HTML preview page can be generated to show the output results and possible usage.

var config = {
  preview: false
};

gulp.task('multitool', function () {
    return gulp.src('*.svg')
        .pipe(svgMultitool({
            preview: false
        }))
        .pipe(gulp.dest("out"));
});

Post Processing

If you want to make last minute changes to the generated SVG data before it gets to the output templates, you can use one of the following options.

var config = {
    postProcess: function (data, config) {
        return data; // modify the data and return it
    }
};

/* or */

var config = {
    async: true, // asynchronous
    postProcess: function (data, config, done) {
        done(data); // modify the data and pass it
    }
};

/* then */

gulp.task('multitool', function () {
    return gulp.src('*.svg')
        .pipe(svgMultitool(config))
        .pipe(gulp.dest("out"));
});

Options

License

Copyright (c) 2018 Steven Jackson

Licensed under the MIT license.