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
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
Formatters
You can change the output format 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
svgi
is released under the Apache License v2.0. Developed by @Laux_es ;).