svg-modify
Resize and color svg-images
Last updated 5 years ago by yoksel .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install svg-modify 
SYNC missed versions from official npm registry.

svg-modify

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

Usage

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
};

modify.makeChanges(changesParams);

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:

arrow-up--w50.svg
arrow-up--green.svg
arrow-up--w150--steelblue.svg
home--w150.svg
...

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

Current Tags

  • 0.0.12                                ...           latest (5 years ago)

12 Versions

  • 0.0.12                                ...           5 years ago
  • 0.0.11                                ...           5 years ago
  • 0.0.10                                ...           5 years ago
  • 0.0.9                                ...           6 years ago
  • 0.0.8                                ...           6 years ago
  • 0.0.7                                ...           6 years ago
  • 0.0.6                                ...           6 years ago
  • 0.0.5                                ...           6 years ago
  • 0.0.4                                ...           6 years ago
  • 0.0.3                                ...           6 years ago
  • 0.0.2                                ...           6 years ago
  • 0.0.1                                ...           6 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (0)
None
Dev Dependencies (0)
None

Copyright 2014 - 2016 © taobao.org |