SVGO Dart

🇨🇳 中文文档

A comprehensive SVG optimization library for the Dart/Flutter ecosystem, providing powerful tools to reduce file sizes while preserving visual quality. Inspired by proven optimization techniques used in popular SVG tools.

Packages

Package	Description	pub.dev
svgo	Core SVGO library
svgo_cli	Command-line interface
svgo_hooks_example	Build hooks example

Features

• ✅ Parse SVG files into an Abstract Syntax Tree (XAST)
• ✅ Apply various optimization plugins
• ✅ Serialize optimized AST back to SVG string
• ✅ Fully configurable with plugin system
• ✅ Multipass optimization support
• ✅ 54 builtin optimization plugins (full parity with Node.js SVGO)
• ✅ CSS style parsing and computation
• ✅ Path data manipulation utilities
• ✅ Command-line interface

Quick Start

As a Library

Add svgo to your pubspec.yaml:

dependencies:
  svgo: ^1.0.0

Then use it in your Dart code:

import 'package:svgo/svgo.dart';

void main() {
  final input = '''
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
      <!-- A red rectangle -->
      <rect x="0" y="0" width="100" height="100" fill="red"/>
    </svg>
  ''';

  final result = optimize(input);
  print(result.data);
  // Output: <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="red"/></svg>
}

As a CLI Tool

Install globally:

dart pub global activate svgo_cli

Then use it:

# Optimize a single file (overwrites input)
svgo input.svg

# Optimize to output directory
svgo -o dist input.svg

# Optimize all SVGs in a directory
svgo "src/**/*.svg"

# Multipass optimization with custom precision
svgo -m -p 2 icon.svg

Configuration

Using Presets

final result = optimize(input, SvgoConfig(
  plugins: ['preset-default'],
));

Custom Plugin Configuration

final result = optimize(input, SvgoConfig(
  plugins: [
    'removeComments',
    'removeMetadata',
    {
      'name': 'cleanupNumericValues',
      'params': {'floatPrecision': 2},
    },
  ],
));

Multipass Optimization

final result = optimize(input, SvgoConfig(
  multipass: true,
));

Available Plugins

Cleanup Plugins

• cleanupAttrs - Cleanup attributes from newlines, trailing spaces
• cleanupNumericValues - Round numeric values, remove default units

Removal Plugins

• removeComments - Remove comments
• removeDesc - Remove <desc> elements
• removeDoctype - Remove DOCTYPE declaration
• removeEditorsNSData - Remove editor-specific namespaces
• removeEmptyAttrs - Remove empty attributes
• removeEmptyContainers - Remove empty container elements
• removeEmptyText - Remove empty text elements
• removeMetadata - Remove <metadata> elements
• removeTitle - Remove <title> elements
• removeUnusedNS - Remove unused namespace declarations
• removeUselessDefs - Remove elements in <defs> without id
• removeXMLProcInst - Remove XML processing instructions

Conversion Plugins

• convertColors - Convert color values to shorter formats
• convertEllipseToCircle - Convert ellipses to circles when rx=ry
• convertShapeToPath - Convert shapes to path elements

Structure Plugins

• collapseGroups - Collapse useless groups
• moveElemsAttrsToGroup - Move common attributes to parent group
• moveGroupAttrsToElems - Move group transforms to children
• sortAttrs - Sort element attributes
• sortDefsChildren - Sort <defs> children for better compression

Style Plugins

• mergeStyles - Merge multiple style elements

Build Hooks

Version note: Support for build hooks was introduced in Dart 3.10.

The svgo_hooks_example package demonstrates how to use Dart Hooks to automatically optimize SVG files during build time. See the svgo_hooks_example package for a complete implementation.

Development

This project uses Melos for monorepo management.

# Install melos
dart pub global activate melos

# Bootstrap (install dependencies for all packages)
melos bootstrap

# Run analysis
melos analyze

# Run tests
melos test

# Format code
melos format

License

MIT License - Copyright (c) 2025 iota9star

See LICENSE for details.

Acknowledgments

Thanks to SVGO for inspiration and reference.