node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



Modify SVG by JSON.

Svg-modify helps you to resize SVG-images, colorize them and make a number of variations of one file.

It may be useful if you need to prepare SVG images for convertation to PNG.

Getting Started

npm install svg-modify --save-dev


This'll change SVG without renaming:

var folderOptions = {
    "arrow-up": { // <--- name of file 
        "width": "187"
    "home": { // <--- name of file 
        "height": "42"
var changesParams = {
    "inputFolder": "sources/",  // <--- folder with source files 
    "outputFolder": "result/", // <--- place for changed files 
    "folderOptions": folderOptions

If you need to colorize transparent SVG, add defaultColor:

var changesParams = {
    "inputFolder": "sources/",
    "outputFolder": "result/",
    "folderOptions": folderOptions,
    "defaultColor": "hotpink" // <--- color 

This'll change SVG without renaming too.

If you need not colorize though there are colors in the config, use this:

var changesParams = {
    "inputFolder": "sources/",
    "outputFolder": "result/",
    "folderOptions": folderOptions,
    "colorize": false

It's useful for resizing SVG without coloring it.

Creating modifications of one file

Set list of variations:

var folderOptions = {
        "arrow-up": [{
                "width": "50"
            }, {
                "color": "green"
            }, {
                "width": "150",
                "color": "steelblue"
        "home": [{
                "width": "150"
            }, {
                "width": "170",
                "color": "teal"
            }, {
                "height": "62",
                "color": "yellowgreen"

This'll create a number of variations with names like these:


Release History

0.0.10 — Add global colorize option. Use svgmodify.colorize = false; to switch colorize off.

0.0.9 - Add cleaning of SVG content. Comments, title, desc, Sketch attributes and ID will be removed from symbols.

0.0.8 - Fix modifications created with hex colors

0.0.6 - Add ability to use colorize: false if images needn't be colorized though colors in config are exist

0.0.5 - Now fill color correctly overrides with color from config

0.0.4 - Add ability colorize without additional configs