SVGO

🇨🇳 中文

A comprehensive SVG optimization library for Dart, inspired by proven optimization techniques in the ecosystem.

Features #

• Parse SVG files into an Abstract Syntax Tree (XAST)
• Apply various optimization plugins
• Serialize optimized AST back to SVG string
• Fully configurable plugin system
• Multipass optimization support
• 54 builtin optimization plugins with comprehensive optimization coverage
• CSS style parsing and computation using csslib
• Path data manipulation utilities
• CSS selector matching

Installation #

Add to your pubspec.yaml:

dependencies:
  svgo: ^1.2.0

Or run:

dart pub add svgo

Usage #

Basic Usage #

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

With Configuration #

final result = optimize(input, SvgoConfig(
  multipass: true,
  plugins: [presetDefault],
));

Custom Plugin Selection #

final result = optimize(input, SvgoConfig(
  plugins: [
    removeComments,
    convertColors,
    cleanupNumericValues,
  ],
));

Plugin with Custom Parameters #

final result = optimize(input, SvgoConfig(
  plugins: [
    removeComments,
    cleanupNumericValues.withParams(
      CleanupNumericValuesParams(floatPrecision: 2),
    ),
    convertPathData.withParams(
      ConvertPathDataParams(
        floatPrecision: 2,
        makeArcs: MakeArcsConfig(threshold: 2.5),
      ),
    ),
  ],
));

Data URI Output #

final result = optimize(input, SvgoConfig(
  datauri: DataUriType.base64,
));
// result.data: data:image/svg+xml;base64,...

Working with AST #

// Parse SVG to AST
final ast = parseSvg(svgString);

// Traverse and modify AST
for (final child in ast.children) {
  if (child is XastElement && child.name == 'rect') {
    child.attributes['fill'] = 'blue';
  }
}

// Convert AST back to string
final output = stringifySvg(ast);

CSS Style Computation #

final ast = parseSvg(svgWithStyles);
final stylesheet = collectStylesheet(ast);
final styles = computeStyle(stylesheet, element);

if (styles['fill'] case StaticStyle(:final value)) {
  print('Fill color: $value');
}

Path Data Utilities #

// Parse path data
final pathData = parsePathData('M10 20 L30 40 Z');

// Convert to absolute coordinates
final absolute = convertRelativeToAbsolute(pathData);

// Stringify back
final pathString = stringifyPathData(absolute);

Available Plugins #

Cleanup Plugins #

Remove Plugins #

Convert Plugins #

Merge & Move Plugins #

Sort Plugins #

Style Plugins #

Other Plugins #

Presets #

preset-default #

The default preset includes safe optimizations:

final result = optimize(input, SvgoConfig(
  plugins: [presetDefault],
));

You can customize specific plugins by combining the preset with custom configurations:

final result = optimize(input, SvgoConfig(
  plugins: [
    // Use preset minus specific plugins you want to customize
    removeDoctype,
    removeXMLProcInst,
    removeComments,
    // Custom cleanupNumericValues with specific precision
    cleanupNumericValues.withParams(
      CleanupNumericValuesParams(floatPrecision: 2),
    ),
    // More plugins...
  ],
));

API Reference #

optimize(input, [config]) #

Optimizes an SVG string.

Parameters:

• input (String): The SVG string to optimize
• config (SvgoConfig?): Optional configuration

Returns: SvgoOutput with:

• data (String): The optimized SVG string

parseSvg(input, [path]) #

Parses an SVG string into an XAST.

Parameters:

• input (String): The SVG string to parse
• path (String?): Optional file path for error messages

Returns: XastRoot

stringifySvg(ast, [options]) #

Converts an XAST back to an SVG string.

Parameters:

• ast (XastRoot): The AST to stringify
• options (StringifyOptions?): Formatting options

Returns: String

collectStylesheet(root) #

Collects CSS rules from style elements.

Parameters:

• root (XastRoot): The parsed SVG AST

Returns: Stylesheet

computeStyle(stylesheet, element) #

Computes styles for an element.

Parameters:

• stylesheet (Stylesheet): The collected stylesheet
• element (XastElement): The target element

Returns: Map<String, ComputedStyle>

License #

MIT License - Copyright (c) 2025 iota9star

Acknowledgments #

Thanks to SVGO for inspiration and reference.