Brew is a pretty common way to install tools and libraries in Mac OS.

Provide an executable file without any dependency is very useful and valuable. We can try zeit/pkg to generate the different executable files. However, we must take care about the size of the output, this is a CLI tool.

This option will include the properties of the nodes in the tree view of the human formatter.

All the dependencies are outdated and many of them includes CVEs. I plan to upgrade all of them so I close all current CVEs.

Show the number of nodes based on the category and the type. By default, the categories and types with 0 items will be hidden. We can add a --stats-all option to include all of them.

Currently, the CLI allows both options at the same time. When this corner case happens, the file path is ignored. However, providing both options is not expected so the CLI should fail and provide a nice message when this happens.

I don't want to add the library documentation until the 1.1.0 release.

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. 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] ] } }
*/

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 ;).

Unable to build my app. Get this error message:

ERROR in 0c02a418986ac76c2f49.app.js from UglifyJs
Unexpected token: punc ()) [0c02a418986ac76c2f49.app.js:11031,18]

webpack.config.js

const path               = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin     = require('uglifyjs-webpack-plugin');
const webpack            = require('webpack');
const sass               = require('node-sass');

const config = {
  devtool: 'inline-source-map',
  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new UglifyJSPlugin({
      beautify: false,
      mangle: false,
      sourceMap: true,
      compress: { screw_ie8: true },
      comments: false
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: '[hash].vendor.js',
      minChunks: 'Infinity'
    }),
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
    new webpack.HotModuleReplacementPlugin()
  ],

  entry: {
    app: './src/init.js',
    vendor: './src/vendor.js'
  },

  node: {
    fs: 'empty',
    child_process: 'empty'
  },

  output: {
    filename: '[chunkhash].app.js',
    path: path.resolve(__dirname, 'dist')
  },
  
  devServer: {
    contentBase: 'dist/',
    historyApiFallback: true,
    compress: true,
    clientLogLevel: 'info',
    port: 1337,
    inline: true,
    filename: 'bundle.js',
    publicPath: '/',
    watchOptions: {
      aggregateTimeout: 0,
      poll: 500
    },

package.json

{
[ redacted ]
  "author": "Mina Demian",
  "main": "index.js",
  "dependencies": {
    "@uirouter/angularjs": "1.0.3",
    "angular": "1.5.5",
    "angular-local-storage": "0.5.2",
    "angular-sanitize": "1.5.5",
    "angular-translate": "2.15.1",
    "lodash": "^4.17.4",
    "simple-svg-tools": "^1.0.5",
    "svgi": "^1.1.0",
    "ua-parser-js": "0.7.12"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "browser-sync": "^2.18.12",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.29.0",
    "jasmine": "^2.6.0",
    "karma": "^1.7.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-jasmine": "^1.1.0",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "serve": "^6.0.2",
    "style-loader": "^0.18.2",
    "uglify-es": "git+https://github.com/mishoo/UglifyJS2.git#harmony",
    "uglifyjs-webpack-plugin": "^0.4.6",
    "url": "^0.11.0",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.5.1",
    "webpack-vendor-chunk-plugin": "^1.0.0"
  },
  "scripts": {
    "test": "eslint src && jasmine",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
[ redacted ]
}

It provides a license checking for the project. A badge will be added to the repo.

Use the following approach to give the contributors a proper credit: https://github.com/alexjoverm/typescript-library-starter#credits.

This MR aims to provide stability to the project by including a full test suite to the project. This MR will focus on adding the framework and configuring GitHub actions so any new commit will be properly tested.

The plan is to switch to vitest for the following reasons:

• Jest contains many many features this project won't use
• The number of dependencies is considerably higher on jest than vitest (333 vs 47)
• Learning purposes

For thes reasons, this project will start using vitest.

I'm providing binary files in every release. The README file already includes a section that mentions the binaries, so it must be updated too.

After adding vitest and enable testing with GitHub Actions, now it's time to complete the testing of all the current SVGI features. The goal is to reach >95% code coverage and try to reach 100%.

The CLI shows the bytes directly without any unit:

2048

This should be converted to:

2Kb

• The file doesn't exist
• The file is not a valid XML

I get this error when I try to use svgi in any way.

/Users/seth/.config/yarn/global/node_modules/svgi/index.js:36
          let svg = new SVG(filePath, result),
          ^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)
    at startup (node.js:140:18)
    at node.js:1043:3

I am running node 4.8.3

The README file is outdated as:

• Sponsors section doesn't apply anymore
• My twitter username changed to @_angelmm some years ago

Apart from that, I plan to add Alexjs and Woke to ensure the repo uses an open and inclusive language.

The main reasoning behind this change is to avoid injecting CLI libraries to projects that only want to use the SVGI core library. Currently, 6 of 7 libraries are only required for the CLI usage:

"dependencies": {
    "ascii-tree": "^0.3.0",
    "cli-table": "^0.3.11",
    "colors": "^1.4.0",
    "commander": "8.3.0",
    "filesize": "^8.0.7",
    "js-yaml": "^4.1.0",
    "xml2js": "^0.4.23"
  },

For this reason, I plan to split the project into two packages: core and CLI. To simplify the management, the code for both packages will be available in this project as a monorepo.

Part of this task is to evaluate the tooling to manage this monorepo. I have in mind to check 3 different tools, but feel free to suggest any other you may consider for monorepos.

• Rush
• Lerna
• Turborepo

As part of this, I would like to investigate Typescript configurations for monorepos (related to #37).

If we provide the library code separated from the CLI logic, other projects will be able to parse and inspect the SVG files. This is pretty useful to build tools on top of svgi.

More information in this Twitter conversation

It would be useful to provide some suggestions to improve the given SVG file as part of the output. --lint will activate these suggestions.

Rules

A rule represents a test to the SVG file. These rules must follow the good practices of SVG files.

• Use generic font families or rasterize the glyphs
• Calculate the minimum viewBox
• Compress the SVG
• Reduce unreasonable precision (10.000000001)
• Check the close tag of the SVG file #18

Please, add your ideas to this issue or the Hacker News Thread

Yarn v1 was in maintenance since January 2020 and most of the new features provided by Yarn are already available in NPM. In the future, I may test the usage of pnpm, but for now I'm gonna switch the project to use NPM.

Run lint and test npm scripts.

This link is broken. https://asciinema.org/a/123343
Please fix.

This package will be the latest one before the v2.0.0. We will ensure that anyone using the old version of SVGI gets at least all the dependencies updated.

As part of this task, I plan to add a .npmignore file. The previous packages contained many files that are not required. Those shouldn't be added to the final package.

Currently, the CLI get the filename from an argument. It would be nice to read the input from stdin and process it as a normal SVG file:

cat myfile.svg | svgi

This is using svgi in code. Using latest version 1.1.0.

test SVG file

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="-10 -10 178 178" height="177.523" width="155.932" xmlns="http://www.w3.org/2000/svg">
  <path d="M155.932 155.932V0H0v155.932h155.932z"/><path d="M150.83 150.83V5.101H5.101V150.83H150.83z" fill="#f90"/>
  <text>herpderp</text>
  <g>
    <path d="M140.823 111.783L44.368 14.077 15.108 44.15l96.456 97.705 29.259-30.071z"/><path d="M111.783 15.108l-97.706 96.456 30.072 29.259 97.706-96.455-30.072-29.26z"/>
  </g>
</svg>

1. Remove or change end root element

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="-10 -10 178 178" height="177.523" width="155.932" xmlns="http://www.w3.org/2000/svg">
  <path d="M155.932 155.932V0H0v155.932h155.932z"/><path d="M150.83 150.83V5.101H5.101V150.83H150.83z" fill="#f90"/>
  <text>herpderp</text>
  <g>
    <path d="M140.823 111.783L44.368 14.077 15.108 44.15l96.456 97.705 29.259-30.071z"/><path d="M111.783 15.108l-97.706 96.456 30.072 29.259 97.706-96.455-30.072-29.26z"/>
  </g>
</s>

Output at commandline

{ stats: 
   { totalNodes: 7,
     types: { svg: 1, path: 4, text: 1, g: 1 },
     categories: { containers: 2, shapes: 4, text: 1 } },
  nodes: 
   { type: 'svg',
     category: 'containers',
     properties: 
      { viewBox: '-10 -10 178 178',
        height: '177.523',
        width: '155.932',
        xmlns: 'http://www.w3.org/2000/svg' },
     children: [ [Object], [Object], [Object], [Object] ] } }

2. Remove or change start root element

<?xml version="1.0" encoding="UTF-8"?>

  <path d="M155.932 155.932V0H0v155.932h155.932z"/><path d="M150.83 150.83V5.101H5.101V150.83H150.83z" fill="#f90"/>
  <text>herpderp</text>
  <g>
    <path d="M140.823 111.783L44.368 14.077 15.108 44.15l96.456 97.705 29.259-30.071z"/><path d="M111.783 15.108l-97.706 96.456 30.072 29.259 97.706-96.455-30.072-29.26z"/>
  </g>
</s>

Output
couldnt find file Invalid SVG file

Should the initialization not fail if start or end root element don't exist or they don't match?

Currently, the core library can load a SVG file directly from the filesystem. The main purpose of the core library is to read a SVG content and extract information from it. The load of the SVG content from the filesystem is not directly related to the core feature and it can be done from the CLI side.

Using fs in the core library is preventing other interesting use cases for SVGI as the core library can be used in web apps too. An example of this limitation is #19.

After removing this dependency, the core library will be valid for the browser environment.

Before adding new features to this project, I plan to switch the codebase to Typescript. The main goal is to provide a better structure and types to the codebase so it's easier to consume and extend.

This would be my first Typescript project, so I will use it as a learning tool :). I plan to extensively document the library so I simplify the consumption without the CLI itself.

To ensure the stability of the project, this task will be completed after #36

Hi,

I'm curious if there was any way to configure the output of the children from the report function to respect the order of the nodes of an svg.

I use svgi as an intermediary layer to pull out the svg data to do the following; merging ThemeProvider color in, generating named TS definitions for each svg icon, and a few other things that is not important for this request

Up until now I've only handled single layer svg's using path, however, I now have a new requirement of different elements, and I'm getting svgs show up incorrectly.

To get my point across, I have an example below which replicates the same issue.

I currently have an svg described by:

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="48" height="48" fill="yellow"/>
    <circle cx="24" cy="24" r="24" fill="red"/>
    <rect x="16" y="16" width="16" height="16" fill="blue"/>
</svg>

Which produces the following svg

const SVGI = require('svgi');
const { nodes } = new SVGI('filepath/to/test.svg').report();
console.log(nodes);

{
  type: 'svg',
  category: 'containers',
  properties: {
    width: '48',
    height: '48',
    viewBox: '0 0 48 48',
    fill: 'none',
    xmlns: 'http://www.w3.org/2000/svg'
  },
  children: [
    {
      type: 'rect',
      category: 'shapes',
      properties: [Object],
      children: []
    },
    {
      type: 'rect',
      category: 'shapes',
      properties: [Object],
      children: []
    },
    {
      type: 'circle',
      category: 'shapes',
      properties: [Object],
      children: []
    }
  ]
}

However, the rects have been grouped to the top, and produces the following shape

Is there a way for the children to be as such:

{
      type: 'rect',
      category: 'shapes',
      properties: [Object],
      children: []
    },
    {
      type: 'circle',
      category: 'shapes',
      properties: [Object],
      children: []
    },
    {
      type: 'rect',
      category: 'shapes',
      properties: [Object],
      children: []
    }

Thank you,

Using [email protected]

Start using new branch name. This can be done easily from the GitHub UI.