# gulp-svg-multitool > Various SVG manipulations using gulp Latest version **1.0.9** (published 2018-06-28) · MIT license · 0 weekly downloads ## Install ```sh npm install gulp-svg-multitool pnpm add gulp-svg-multitool yarn add gulp-svg-multitool bun add gulp-svg-multitool ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.9 | | Published | 2018-06-28 | | First published | 2018-06-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >= 4.0.0 | | Dependencies | 9 | | Unpacked size | 49.1 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | Steven Jackson | | Maintainers | sdjack | | Keywords | npm, gulp, gulpplugin, svg | ## Links - npm: https://www.npmjs.com/package/gulp-svg-multitool - Repository: https://github.com/sdjack/gulp-svg-multitool - Homepage: https://github.com/sdjack/gulp-svg-multitool#readme - Issues: https://github.com/sdjack/gulp-svg-multitool/issues - npm.io page: https://npm.io/package/gulp-svg-multitool ## Dependencies (9) - [q](https://npm.io/package/q.md) 1.4.1 - [svgo](https://npm.io/package/svgo.md) 0.6.6 - [async](https://npm.io/package/async.md) ^2.6.1 - [vinyl](https://npm.io/package/vinyl.md) 1.2.0 - [colors](https://npm.io/package/colors.md) ^1.3.0 - [lodash](https://npm.io/package/lodash.md) ^4.17.10 - [svg2png](https://npm.io/package/svg2png.md) ^4.1.1 - [through2](https://npm.io/package/through2.md) 2.0.1 - [gulp-util](https://npm.io/package/gulp-util.md) 3.0.7 ## Recent versions - 1.0.9 (latest) — 2018-06-28 - 1.0.8 — 2018-06-28 - 1.0.5 — 2018-06-26 - 1.0.4 — 2018-06-26 - 1.0.3 — 2018-06-22 - 1.0.2 — 2018-06-21 - 1.0.1 — 2018-06-21 - 1.0.0 — 2018-06-21 ## README gulp-svg-multitool [![Build Status](https://travis-ci.org/sdjack/gulp-svg-multitool.svg?branch=master)](https://travis-ci.org/sdjack/gulp-svg-multitool) ================ ## Table of contents * [Install](#install) * [Usage](#usage) * [Examples](#examples) * [PNG fallbacks](#png-fallback) * [Symbols mode](#symbols-mode) * [Custom filenames](#custom-filenames) * [Previews](#previews) * [Post Processing](#post-processing) * [Options](#options) * [License](#license) ## Install Install it locally to your project. ```js $ npm install --save-dev gulp-svg-multitool ``` ## Usage ```js 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. ```js 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](http://css-tricks.com/svg-symbol-good-choice-icons/) outlines. ```js 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. ```js 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. ```js 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. ```js 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. --- _Source: https://npm.io/package/gulp-svg-multitool · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._