svg-smart

   ______      __________            ____  __  ___  ___     ___    ______
  / _____ |   /  _  ____/           / __/ /  |/  / / _ |   / _ \  /_  __/
  \ \   | |  / / / / __    ____    _\ \  / /|_/ / / __ |  / , _/   / /
   \ \  | | / / / / / /   /___/   /___/ /_/  /_/ /_/ |_| /_/|_|   /_/
  __\ \ | |/ / / (_/ /          
/____/  |___/  \____/  Automate & optimize your graphic assets.

Updated : April 8, 2016

A Node.js module that generates all your svg, png, icon and svg sprites needs using a data─driven svg template system.

This Module was designed to be used with a build system, i.e. http://gulpjs.com/, http://gruntjs.com/ etc.

For Gulp projects, use Gulp SVG Smart

Workflow

          (1) SVG /    (2) PNG                   (3) ICON              (4) HTML
              SPRITE
DATA ═════╦════════════╦═════════════════════════╦════════════════════════════╗
          │            │                         │                            │
┌─────────v────┐       │                         │                 ┌──────────v────┐
│ SVG TEMPLATE │       │                         │                 | HTML TEMPLATE │
└───┬──────────┘       v                         v                 └──────────┬────┘
    │                                                                         │
    ├─ logo.svg ───────┬─ logo─w164.png  ────────┬─ favicon.ico               │
    │                  ├─ logo─[e-mail]       ├─ favicon─32x32.png         │
    │                  ├─ logo─h32.png           ├─ android─chrome─36x36.png  │
    │                  └─ logo─[e-mail]        ├─ apple─touch─icon.png      │
    │                  ┆                         ┆                            │
    │                                                                         │
    ├─ logo─text.svg ──┬─ logo─text+w125.png                                  │
    │                  ├─ logo─[e-mail]                               │
    ┆                  ├─ logo─text+h32.png                                   │
                       └─ logo─[e-mail]   ┆                            │
    │                  ┆                         │                            │
    ├─ sprite.svg                                │                            │
    ├─ sprite.css      ┆                         │                            │
    │                  │                         │                            │
┌───v──────────────────v─────────────────────────v────────────────────────────v─┐
│ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒     index.html    ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ │
└───────────────────────────────────────────────────────────────────────────────┘

The smart.json file contains the data used to drive the media generation process.

Data

List of values that can be referenced in the media list.

Development

1- Install Release-it

npm install release-it -g

2- Run it, to git commit and publish to npm

release-it