svgi

svgi is a CLI tool to inspect the content of SVG files. It provides you information about the file, the elements in the SVG and the hierarchy. It also count the number of elements and in the future, it will provide tips to improve the SVG

Installation

CLI

svgi is written in javascript (node) and distributed through npm. Both are required to install svgi .

To install it, just execute the following command in the terminal:

npm install -g svgi

Then, svgi will be available in your path:

svgi --help Usage: svgi [options] <file> Options: -h, --help output usage information -o, --output <formatter> Select the format of the output: json, yaml, or human (default) -t, --tree Display only the node tree -b, --basic Display only the basic information -s, --stats Display only the node statistics --all-stats Return types and categories with 0 ocurrences in the stats object --ids Show the IDs of the nodes in the tree view. Only available for human formatter --props Show the properties of the nodes in the tree view. Only available for human formatter --legend Show the tree color legend. Only available for human formatter

Node Version

svgi requires a > 6 node version because it uses some features from the new versions of ECMAScript.

Binary files

We are providing executable files for the environments that do not fit within current requirements. Binaries for Linux, macOS, and Windows can be downloaded from the releases page on GitHub.

Library

You can also integrate svgi in your projects. This library will provide you a powerful way to get information about SVG files. We only need to install the library and add it as a depedency in our project:

npm install --save svgi

Now, you can start to inspect SVG files from your code :)

const SVG = require('svgi'); let svg = new SVG('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="10" y="10" height="100" width="100" style="fill: #0000ff"/></svg>'); // Get the report svg.report(); /* { stats: { totalNodes: 2, types: { svg: 1, rect: 1 }, categories: { containers: 1, shapes: 1 } }, nodes: { type: 'svg', category: 'containers', properties: { xmlns: 'http://www.w3.org/2000/svg', 'xmlns:xlink': 'http://www.w3.org/1999/xlink' }, children: [ [Object] ] } } */

CLI Output

You can change the output format of the CLI with the -o option.

Human

This is the default option. Also, we're working on this format.

svgi icon.svg

Basic information ┌──────┬─────────────────────────────────────┐ │ Name │ icon.svg │ ├──────┼─────────────────────────────────────┤ │ Path │ /Users/angel/Projects/svgi/icon.svg │ ├──────┼─────────────────────────────────────┤ │ Size │ 204 │ └──────┴─────────────────────────────────────┘ Node statistics ┌─────────────┬────┐ │ Total Nodes │ 14 │ └─────────────┴────┘ ┌──────┬───────┐ │ Type │ Count │ ├──────┼───────┤ │ svg │ 1 │ ├──────┼───────┤ │ g │ 4 │ ├──────┼───────┤ │ rect │ 3 │ ├──────┼───────┤ │ path │ 4 │ ├──────┼───────┤ │ text │ 2 │ └──────┴───────┘ ┌────────────┬───────┐ │ Category │ Count │ ├────────────┼───────┤ │ containers │ 5 │ ├────────────┼───────┤ │ shapes │ 7 │ ├────────────┼───────┤ │ text │ 2 │ └────────────┴───────┘ Node tree svg ├─ g │ └─ g │ └─ g │ ├─ rect │ ├─ rect │ └─ g │ ├─ rect │ ├─ path │ ├─ path │ ├─ path │ └─ path ├─ text └─ text

JSON

svgi -o json icon-small.svg

{ "file": { "name": "icon-small.svg", "path": "/Users/angel/Projects/svgi/icon-small.svg", "size": 204 }, "stats": { "totalNodes": 2, "types": { "svg": 1, "path": 1 }, "categories": { "containers": 1, "shapes": 1 } }, "nodes": { "type": "svg", "category": "containers", "properties": { "viewBox": "0 0 16 16", "xmlns": "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd", "stroke-linejoin": "round", "stroke-miterlimit": "1.414" }, "children": [ { "type": "path", "category": "shapes", "properties": { "d": "M5.667 2.667H7V16H5.667V2.667zm4.666 0V16H9V2.667h1.333zM2.333 0h1.334v10H2.333V0zm10 2.667h1.334V10h-1.334V2.667z" }, "children": [] } ] } }

Combine JSON output with jq

You can use the well known jq command-line JSON processor to read and filter the output of the JSON formatter:

svgi -o json icon.svg | jq '.nodes.properties'

{ "viewBox": "0 0 16 16", "xmlns": "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd", "stroke-linejoin": "round", "stroke-miterlimit": "1.414" }

YAML

svgi -o yaml icon.svg

file: name: icon-small.svg path: /Users/angel/Projects/svgi/icon-small.svg size: 204 stats: totalNodes: 2 types: svg: 1 path: 1 categories: containers: 1 shapes: 1 nodes: type: svg category: containers properties: viewBox: 0 0 16 16 xmlns: 'http://www.w3.org/2000/svg' fill-rule: evenodd clip-rule: evenodd stroke-linejoin: round stroke-miterlimit: '1.414' children: - type: path category: shapes properties: d: >- M5.667 2.667H7V16H5.667V2.667zm4.666 0V16H9V2.667h1.333zM2.333 0h1.334v10H2.333V0zm10 2.667h1.334V10h-1.334V2.667z children: []

Limit the output

The params -b, --basic , -s, --stats and -t, --tree allow you to limit the output of the command:

svgi --stats -o json icon.svg

{ "stats": { "totalNodes": 14, "types": { "svg": 1, "g": 4, "rect": 3, "path": 4, "text": 2 }, "categories": { "containers": 5, "shapes": 7, "text": 2 } } }

License