or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ast-manipulation.mdcli.mdconfiguration.mdcore-optimization.mddata-uri.mdindex.mdplugins.mdutility-functions.md
tile.json

tessl/npm-svgo

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/svgo@4.0.x

To install, run

npx @tessl/cli install tessl/npm-svgo@4.0.0

index.mddocs/

SVGO

SVGO (SVG Optimizer) is a comprehensive Node.js library and command-line tool for optimizing SVG vector graphics files. It removes redundant information, editor metadata, comments, hidden elements, and suboptimal values without impacting visual rendering through a powerful plugin architecture with over 50 built-in optimization plugins.

Package Information

  • Package Name: svgo
  • Package Type: npm
  • Language: JavaScript with TypeScript definitions
  • Installation: npm install svgo

Core Imports

Node.js (recommended):

import { optimize, loadConfig } from "svgo";

Browser:

import { optimize } from "svgo/browser";

CommonJS:

const { optimize, loadConfig } = require("svgo");

Basic Usage

import { optimize } from "svgo";

// Basic optimization
const result = optimize('<svg><rect width="100" height="100"/></svg>');
console.log(result.data); // Optimized SVG string

// With configuration
const result = optimize(svgString, {
  multipass: true,
  plugins: [
    'preset-default',
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-*']
      }
    }
  ]
});

Architecture

SVGO is built around several key components:

  • Core Optimizer: The optimize function that processes SVG input through plugin pipelines
  • Plugin Architecture: 50+ built-in plugins organized in categories (cleanup, removal, conversion, style, path manipulation)
  • AST System: XML Abstract Syntax Tree (XAST) for precise SVG manipulation
  • Configuration System: Flexible plugin configuration with presets and custom parameters
  • Multi-format Support: Node.js, browser, and CLI interfaces with various output formats

Capabilities

Core Optimization

Main SVG optimization functionality that processes SVG strings through configurable plugin pipelines with support for multiple passes and various output formats.

function optimize(input: string, config?: Config): Output;

interface Config {
  path?: string;
  multipass?: boolean;
  floatPrecision?: number;
  plugins?: PluginConfig[];
  js2svg?: StringifyOptions;
  datauri?: DataUri;
}

interface Output {
  data: string;
}

Core Optimization

Configuration Management

Configuration loading and management system for SVGO settings, supporting automatic config file discovery and custom configuration options.

function loadConfig(configFile?: string, cwd?: string): Promise<Config | null>;

Configuration

Plugin System

Comprehensive plugin architecture with 50+ built-in plugins for SVG optimization, organized into categories like cleanup, removal, conversion, and styling operations.

interface Plugin<P = any> {
  (root: XastRoot, params: P, info: PluginInfo): Visitor | null | void;
}

interface PluginConfig {
  name: string;
  params?: any;
  fn?: Plugin;
}

interface BuiltinPlugin<Name extends string, Params> {
  name: Name;
  description?: string;
  fn: Plugin<Params>;
}

Plugin System

AST Manipulation

XML Abstract Syntax Tree manipulation utilities for querying, modifying, and traversing SVG document structures with CSS selector support.

function querySelector(node: XastParent, selector: string, parents?: Map<XastNode, XastParent>): XastChild | null;
function querySelectorAll(node: XastParent, selector: string, parents?: Map<XastNode, XastParent>): XastChild[];

AST Manipulation

Data URI Utilities

SVG Data URI encoding and decoding utilities for converting SVG strings to and from various Data URI formats (base64, URL-encoded, unencoded).

function encodeSVGDatauri(str: string, type?: DataUri): string;
function decodeSVGDatauri(str: string): string;

type DataUri = 'base64' | 'enc' | 'unenc';

Data URI Utilities

Utility Functions

Advanced utility functions for security checking, reference detection, and numeric precision handling, commonly used in custom plugins and advanced SVG processing workflows.

function hasScripts(node: XastElement): boolean;
function includesUrlReference(body: string): boolean;
function findReferences(attribute: string, value: string): string[];
function toFixed(num: number, precision: number): number;

Utility Functions

CLI Interface

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

svgo [INPUT...] [OPTIONS]

CLI Interface

Constants and Collections

Library version information and comprehensive SVG specification data used by plugins and advanced applications.

const VERSION: string;
const _collections: SVGCollections;

interface SVGCollections {
  elemsGroups: Record<string, Set<string>>;
  attrsGroups: Record<string, Set<string>>;
  elems: Record<string, ElementSpec>;
  colorsNames: Record<string, string>;
  colorsShortNames: Record<string, string>;
  colorsProps: Set<string>;
  referencesProps: Set<string>;
  inheritableAttrs: Set<string>;
  editorNamespaces: Set<string>;
  textElems: Set<string>;
  pathElems: Set<string>;
}

interface ElementSpec {
  attrsGroups: Set<string>;
  attrs: Set<string>;
  defaults: Record<string, string>;
  deprecated: Set<string>;
  contentGroups: Set<string>;
}

Types

// Core types
interface XastRoot {
  type: 'root';
  children: XastChild[];
}

interface XastElement {
  type: 'element';
  name: string;
  attributes: Record<string, string>;
  children: XastChild[];
}

interface XastText {
  type: 'text';
  value: string;
}

interface XastComment {
  type: 'comment';
  value: string;
}

interface XastCdata {
  type: 'cdata';
  value: string;
}

interface XastInstruction {
  type: 'instruction';
  name: string;
  value: string;
}

interface XastDoctype {
  type: 'doctype';
  name: string;
  data: {
    doctype: string;
  };
}

type XastChild = XastElement | XastText | XastComment | XastCdata | XastInstruction | XastDoctype;
type XastParent = XastRoot | XastElement;
type XastNode = XastRoot | XastChild;

// Plugin types
interface PluginInfo {
  path?: string;
  multipassCount: number;
}

interface Visitor {
  doctype?: VisitorNode<XastDoctype>;
  instruction?: VisitorNode<XastInstruction>;
  comment?: VisitorNode<XastComment>;
  cdata?: VisitorNode<XastCdata>;
  text?: VisitorNode<XastText>;
  element?: VisitorNode<XastElement>;
  root?: VisitorRoot;
}

interface VisitorNode<Node> {
  enter?: (node: Node, parentNode: XastParent) => void | symbol;
  exit?: (node: Node, parentNode: XastParent) => void;
}

interface VisitorRoot {
  enter?: (node: XastRoot, parentNode: null) => void;
  exit?: (node: XastRoot, parentNode: null) => void;
}

// Output formatting
interface StringifyOptions {
  doctypeStart?: string;
  doctypeEnd?: string;
  procInstStart?: string;
  procInstEnd?: string;
  tagOpenStart?: string;
  tagOpenEnd?: string;
  tagCloseStart?: string;
  tagCloseEnd?: string;
  tagShortStart?: string;
  tagShortEnd?: string;
  attrStart?: string;
  attrEnd?: string;
  commentStart?: string;
  commentEnd?: string;
  cdataStart?: string;
  cdataEnd?: string;
  textStart?: string;
  textEnd?: string;
  indent?: number | string;
  regEntities?: RegExp;
  regValEntities?: RegExp;
  encodeEntity?: (char: string) => string;
  pretty?: boolean;
  useShortTags?: boolean;
  eol?: 'lf' | 'crlf';
  finalNewline?: boolean;
}