Create batched rasterizations of SVG files to other formats suitable for multiple device types.
npm install svg-rasterizerCreate batched rasterizations of SVG files to other formats suitable for multiple device types.
Given an input of images:
- if png, optimize using pngquaint
- if svg, optimize using svgo, then rasterize using svgexport, then optimize if rasters are png
And copy to a specified dest directory.
npm i svg-rasterizer --save
``javascript
var Rasterizer = require('svg-rasterizer')
var r = new Rasterizer(
r.process().then(function(fileList) {}, function (err) {})
`
`javascript
module.exports = {
// See debug messages, do not clean up the temporary directory
debug: true,
// svgo options
svgOptimizer: {
plugins: [
{ removeViewBox: false }
]
},
// Rasterizations to generate from an svg file
// config uses svgexport
outputFormats: [
{
//Use {{filename}} template to use the original file's filename as a base for the
//rasterized file
filename: "{{filename}}-2x",
format: "png",
quality: 100,
inputViewbox: null,
outputSize: "2x",
viewboxMode: null,
styles: null
},
{
filename: "{{filename}}-3x",
format: "png",
quality: 100,
inputViewbox: null,
outputSize: "3x",
viewboxMode: null,
styles: null
},
{
filename: "{{filename}}-jp",
format: "jpg",
quality: 100,
inputViewbox: null,
outputSize: null,
viewboxMode: null,
styles: null
}
],
// Glob'd directories containing files
// Filetypes must be specified
input: [
'test/mock/data/*/.svg',
'test/mock/data/*/.png'
],
// Output directory - uses the directory structure of the input files
// when generating output
outputDir: 'dist',
// Cleans the output dir before running (default is false)
cleanOutputDir: false,
// Directory containing cache metadata for faster build times
// set to null to disable caching
cacheDir: 'svg-rasterizer-cache'
}
`
A Grunt task is included, called svg-rasterizer:
`javascript
module.exports = function(grunt) {
grunt.loadNpmTasks('svg-rasterizer')
grunt.initConfig({
'svg-rasterizer': {
dev: {
// Standard options apply here
options: {
svgOptimizer: {
plugins: [
{ removeViewBox: false }
]
},
outputFormats: [
{
//Use {{filename}} template to use the original file's filename as a base for the
//rasterized file
filename: "{{filename}}-2x",
format: "png",
quality: 100,
inputViewbox: null,
outputSize: "2x",
viewboxMode: null,
styles: null
}
],
input: [
'test/mock/data/*/.svg',
'test/mock/data/*/.png'
],
outputDir: 'dist'
}
}
}
})
grunt.registerTask('default', ['svg-rasterizer:dev'])
`
npm run test`