gulp-svg-multitool

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

Name	Type	Default	Description
async	Boolean	false	Indicate whether or not the processing and post processing should be executed asynchronously
symbols	Boolean	false	Indicate whether the SVG output file should use <symbol> elements instead of a single <defs> element.
jsonData	Boolean	true	Indicate whether or not a JSON data file should be created
preview	Boolean	false	Indicate whether or not an HTML preview file should be created
pngFallback	Boolean	false	Indicate whether or not PNGs should be generated from the source files
pngPath	String	./	Define the png output file path
atlasFile	String	"svg-atlas.svg"	Define the atlas output file name
atlasPath	String	./	Define the atlas output file path
jsonFile	String	"svg-data.json"	Define the JSON output file name
jsonPath	String	./	Define the JSON output file path
previewFile	String	"preview.html"	Define the preview output file name
previewPath	String	./	Define the preview output file path
postProcess	Function	postProcess	Define the preview output file path
svgoConfig	Object	README	Subset of options for the svgo plugin.

License

Copyright (c) 2018 Steven Jackson

Licensed under the MIT license.