No SVGO Required — Built-in Optimizer Included

Built-in SVG Optimizer

SVGER-CLI includes a built-in optimizer with documented local benchmark evidence up to 57.77% file size reduction, without requiring a separate SVGO installation.

Integrated processing, lighter SVG output, and zero extra optimizer configuration for the common path.

🎯 Optimization Achievement

824

Original Size (bytes)

348

Optimized Size (bytes)

57.77% Smaller

No external tools required!

Why Use the Built-in Optimizer?

Compare the old way versus the new approach and see the dramatic difference.

With SVGO
(Old Way)

❌

External Dependency

Adds ~500KB to your project
❌

Slower Processing

2x slower than built-in
❌

Complex Configuration

Requires plugin setup
❌

Version Conflicts

Compatibility issues
❌

Extra Installation

npm install svgo required

Built-in Optimizer
(New Way)

✅

No SVGO Runtime Dependency

Bundled with SVGER-CLI
✅

Measured Locally

Benchmark scope documented
✅

Works Out of the Box

No configuration needed
✅

Always Compatible

Built into SVGER-CLI
✅

Better Results

Up to 57.77% reduction

Optimization Levels

Choose the right balance between file size, processing speed, and safety for your use case.

BALANCED

Best for development and most production use cases

Default

43.33%

Size Reduction

Fast

Processing Speed

High

Safety Level

import { SVGProcessor, OptLevel } from 'svger-cli';

const processor = SVGProcessor.getInstance();
processor.setOptimizationLevel(OptLevel.BALANCED);

const optimized = await processor.cleanSVGContent(svgString);
// Result: 43.33% reduction (safe + fast)

AGGRESSIVE

For CI/CD builds and production bundles

48.91%

Size Reduction

Medium

Processing Speed

Medium

Safety Level

processor.setOptimizationLevel(OptLevel.AGGRESSIVE);

const optimized = await processor.cleanSVGContent(svgString);
// Result: 48.91% reduction (balanced performance)

MAXIMUM

Maximum compression for production assets

Best Compression

57.77%

Size Reduction

Slower

Processing Speed

Lower

Safety Level

processor.setOptimizationLevel(OptLevel.MAXIMUM);

const optimized = await processor.cleanSVGContent(svgString);
// Result depends on SVG structure; project samples have recorded reductions up to 57.77%.

How It Works

The optimizer uses a sophisticated 5-phase pipeline to achieve maximum compression:

1-2

Structure & Styles

Foundation cleaning

Removes unnecessary elements, comments, metadata, and XML declarations that add no visual value.

Attributes

BALANCED level and above

Numeric optimization: Decimal precision, coordinate rounding
Style optimization: Colors, units, default values
Transform optimization: Matrix simplification

Path Optimization

AGGRESSIVE level and above

Path parser: Tokenization, absolute/relative conversion
Path shortener: Command merging, H/V optimization
Command optimizer: C→S, C→Q, Q→T, C/Q→L conversions

Result

23.44% additional reduction

on path-heavy SVGs

Transform Collapsing

MAXIMUM level only

Propagate transforms: Through nested groups
Bake transforms: Directly into path data
Unwrap groups: Remove unnecessary wrappers

Result

42.42% average reduction

on nested structures

⚡ Up to 50.75% on complex Illustrator exports!

Performance Benchmarks

Real-world results from production SVG optimization across different file types.

Real-World Results

SVG Type	Size Reduction	Notes
Material Icons	15-25%	Already optimized icons
Illustrator Exports	40-50%	Complex nested structures
Hand-drawn SVGs	20-30%	Variable complexity
Icon Libraries	30-40%	Standard icon sets

Processing Speed

<10ms

Small Files

(<10KB)

10-50ms

Medium Files

(10-100KB)

50-200ms

Large Files

(100KB-1MB)

CLI Usage

Use the current v4 CLI commands: build for component generation and optimize for direct SVG optimization.

Component Build Optimization

Build a directory of SVGs into components and select an explicit optimization level.

# Generate components with explicit optimization
npx svger build ./icons ./components --optimize balanced

# Supported levels: none, basic, balanced, aggressive, maximum

Direct SVG Optimization

Optimize one SVG file or a directory and write the optimized output separately.

# Optimize directly with maximum-level settings
npx svger optimize ./icons ./optimized-icons --level maximum

# Validate XML before writing directory output
npx svger optimize ./icons ./optimized-icons --level balanced --validate

Disable Build Optimization

Use none when a migration or characterization test needs byte-level comparison.

# Disable optimization during component generation
npx svger build ./icons ./components --optimize none

vs. SVGO Comparison

See how SVGER-CLI's built-in optimizer is positioned against a separate SVGO workflow.

Feature	SVGER-CLI Built-in	SVGO
Installation	✅ Included in SVGER-CLI	Requires a separate package
Size Reduction	✅ Up to 57.77% in the documented sample	Varies by configuration and SVG input
Processing Speed	✅ Integrated in the SVGER-CLI pipeline	External optimizer step
Configuration	✅ Works out of the box	❌ Complex config needed
Path Optimization	✅ Advanced (C→S, C→Q, Q→T)	❌ Limited
Transform Collapsing	✅ Full support	⚠️ Partial
Maintenance	✅ Always compatible	❌ Version conflicts

Built-in SVG Optimizer

🎯 Optimization Achievement

Why Use the Built-in Optimizer?

With SVGO(Old Way)

External Dependency

Slower Processing

Complex Configuration

Version Conflicts

Extra Installation

Built-in Optimizer(New Way)

No SVGO Runtime Dependency

Measured Locally

Works Out of the Box

Always Compatible

Better Results

Optimization Levels

BALANCED

AGGRESSIVE

MAXIMUM

How It Works

Structure & Styles

Attributes

Path Optimization

Transform Collapsing

Performance Benchmarks

Real-World Results

Processing Speed

CLI Usage

Component Build Optimization

Direct SVG Optimization

Disable Build Optimization

vs. SVGO Comparison

With SVGO
(Old Way)

Built-in Optimizer
(New Way)