tessl/npm-svgo

Node.js library and command-line application for optimizing SVG vector graphics files

—

Pending

Overview

Eval results

Files

CLI Interface

Name: tessl/npm-svgo
Author: tessl

Command-line interface for batch SVG optimization with support for file/folder processing, recursive operations, and extensive configuration options.

Capabilities

Basic Usage

The SVGO command-line interface provides powerful batch processing capabilities.

# Basic syntax
svgo [INPUT...] [OPTIONS]

# Common usage patterns
svgo input.svg                           # Optimize single file
svgo input.svg -o output.svg             # Specify output file
svgo *.svg                               # Optimize multiple files
svgo -f icons/ -o optimized/             # Optimize folder
svgo -f icons/ -r                        # Optimize folder recursively
svgo -s '<svg>...</svg>'                 # Optimize from string
svgo - < input.svg > output.svg          # Use stdin/stdout

Input Options

Various ways to provide SVG input to the CLI.

# File inputs
-i, --input <INPUT...>          # Input files, "-" for STDIN
-s, --string <STRING>           # Input SVG data string  
-f, --folder <FOLDER>           # Input folder, optimize all *.svg files

# Examples
svgo -i file1.svg file2.svg     # Multiple input files
svgo -s '<svg><rect/></svg>'    # Direct SVG string
svgo -f ./icons/                # Process entire folder
echo '<svg>...</svg>' | svgo -  # From stdin

Output Options

Control where optimized SVGs are written.

# Output destinations
-o, --output <OUTPUT...>        # Output file or folder, "-" for STDOUT

# Examples
svgo input.svg -o output.svg    # Specific output file
svgo *.svg -o optimized/        # Output to folder
svgo input.svg -o -             # Output to stdout
svgo -f icons/ -o dist/icons/   # Folder to folder

Optimization Options

Configure the optimization process.

# Precision and quality
-p, --precision <INTEGER>       # Set floating point precision
--multipass                     # Multiple optimization passes

# Plugin configuration  
--config <CONFIG>               # Custom config file (.js, .mjs, .cjs)

# Output format
--datauri <FORMAT>              # Output as Data URI (base64|enc|unenc)
--pretty                        # Pretty-print SVG output
--indent <INTEGER>              # Indentation for pretty printing
--eol <EOL>                     # Line breaks (lf|crlf)
--final-newline                 # Ensure final newline

# Examples
svgo input.svg -p 2             # 2 decimal places
svgo input.svg --multipass      # Multiple passes
svgo input.svg --pretty --indent 2  # Pretty formatted
svgo input.svg --datauri base64 # Data URI output
svgo input.svg --config ./my-config.js  # Custom config

Folder Processing

Advanced folder processing options.

# Folder options
-f, --folder <FOLDER>           # Input folder
-r, --recursive                 # Process subfolders recursively
--exclude <PATTERN...>          # Exclude files matching regex pattern

# Examples
svgo -f icons/                  # Process icons folder
svgo -f icons/ -r               # Include subfolders
svgo -f icons/ -r -o dist/      # Recursive with output folder
svgo -f src/ -r --exclude "temp" "draft.*"  # Exclude patterns

Utility Options

Additional utility and output control options.

# Information and control
-q, --quiet                     # Only error messages
--show-plugins                  # List available plugins and exit
--no-color                      # Disable colored output
-v, --version                   # Show version
-h, --help                      # Show help

# Examples
svgo --show-plugins             # List all plugins
svgo input.svg -q               # Quiet mode
svgo --version                  # Show SVGO version

Usage Examples

Single File Optimization:

# Basic optimization
svgo icon.svg

# With custom output
svgo icon.svg -o icon-optimized.svg

# With precision control
svgo icon.svg -p 3 -o icon-optimized.svg

# Pretty formatted output
svgo icon.svg --pretty --indent 2 -o icon-pretty.svg

Multiple File Processing:

# Process multiple files
svgo file1.svg file2.svg file3.svg

# Using wildcards
svgo *.svg
svgo icons/*.svg

# With output directory
svgo *.svg -o optimized/

Folder Processing:

# Process all SVGs in folder
svgo -f ./icons/

# Recursive processing
svgo -f ./src/ -r

# With output folder
svgo -f ./src/icons/ -o ./dist/icons/

# Exclude certain files
svgo -f ./icons/ -r --exclude "temp.*" "draft-.*"

Data URI Output:

# Base64 Data URI
svgo icon.svg --datauri base64

# URL encoded Data URI  
svgo icon.svg --datauri enc

# Unencoded Data URI
svgo icon.svg --datauri unenc

Configuration Files:

# Use custom config
svgo input.svg --config ./svgo.config.js

# Config file examples:
# svgo.config.js
export default {
  multipass: true,
  plugins: [
    'preset-default',
    {
      name: 'removeAttrs',
      params: { attrs: ['data-*'] }
    }
  ]
};

Pipeline Usage:

# Using stdin/stdout
cat input.svg | svgo - > output.svg

# In shell pipelines
find . -name "*.svg" | xargs svgo

# With other tools
curl -s https://example.com/icon.svg | svgo - --datauri base64

Advanced Examples

Batch Processing with Custom Settings:

# Optimize all SVGs with high precision and multipass
svgo -f ./assets/icons/ -r -p 3 --multipass -o ./dist/icons/

# Process with exclusions and pretty output
svgo -f ./src/ -r --exclude "node_modules" "temp.*" --pretty --indent 2 -o ./build/

Development vs Production:

# Development: pretty output, keep IDs
svgo input.svg --pretty --indent 2 --config ./dev-config.js

# Production: maximum optimization
svgo input.svg --multipass -p 2 --config ./prod-config.js

Integration with Build Tools:

# npm scripts in package.json
{
  "scripts": {
    "optimize-icons": "svgo -f src/icons/ -o dist/icons/",
    "optimize-dev": "svgo -f src/icons/ --pretty --config dev.config.js -o dist/icons/",
    "optimize-prod": "svgo -f src/icons/ --multipass --config prod.config.js -o dist/icons/"
  }
}

# Usage
npm run optimize-icons
npm run optimize-prod

Exit Codes

The CLI returns standard exit codes for scripting integration.

# Exit codes
0    # Success
1    # Error (invalid input, file not found, etc.)

# Example usage in scripts
if svgo input.svg -q; then
  echo "Optimization successful"
else
  echo "Optimization failed"
  exit 1
fi

Performance Tips

For Large Batches:

# Use folder mode instead of wildcards for better performance
svgo -f ./icons/           # Better
svgo ./icons/*.svg         # Slower for many files

# Quiet mode reduces output overhead
svgo -f ./icons/ -q

# Avoid pretty printing for production
svgo -f ./icons/ --multipass  # Fast
svgo -f ./icons/ --pretty     # Slower

Configuration Optimization:

# Pre-create config file instead of inline options
svgo -f ./icons/ --config ./fast-config.js

# fast-config.js
export default {
  plugins: [
    // Only essential plugins for speed
    'removeComments',
    'removeEmptyAttrs',
    'cleanupNumericValues'
  ]
};

Error Handling

Common CLI errors and solutions.

# File not found
svgo nonexistent.svg        # Error: file not found

# Invalid SVG  
svgo invalid.svg            # Shows parsing error with line/column

# Permission errors
svgo readonly.svg -o /protected/  # Error: permission denied

# Invalid options
svgo input.svg --invalid-option   # Error: unknown option

# Check for errors in scripts
svgo input.svg || echo "Optimization failed"

Integration Examples

Makefile Integration:

# Makefile
optimize-icons:
	svgo -f src/icons/ -o dist/icons/ --multipass -q

clean-icons:
	rm -rf dist/icons/

.PHONY: optimize-icons clean-icons

Shell Script Integration:

#!/bin/bash
# optimize-assets.sh

echo "Optimizing SVG assets..."

# Create output directory
mkdir -p dist/assets/

# Optimize with error handling
if svgo -f src/assets/ -r -o dist/assets/ --multipass -q; then
  echo "✅ SVG optimization completed"
  
  # Count files
  original=$(find src/assets/ -name "*.svg" | wc -l)
  optimized=$(find dist/assets/ -name "*.svg" | wc -l)
  echo "Processed $original files → $optimized files"
else
  echo "❌ SVG optimization failed"
  exit 1
fi

Docker Integration:

# Dockerfile
FROM node:alpine
RUN npm install -g svgo

COPY assets/ /input/
RUN svgo -f /input/ -o /output/ --multipass -q

COPY --from=optimizer /output/ /app/assets/

Install with Tessl CLI