svgi

    1.1.0 • Public • Published

    npm version Build Status FOSSA Status

    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

    asciicast

    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. We are working to provide executable files for the environments that doesn't fit with the current requirements. More information at #8 and #11.

    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('./')
     
    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

    svgi is released under the Apache License v2.0. Developed by @Laux_es ;).

    Install

    npm i svgi

    DownloadsWeekly Downloads

    2,284

    Version

    1.1.0

    License

    Apache-2.0

    Last publish

    Collaborators

    • angelrb