tessl/npm-svgo

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

—

Pending

Overview

Eval results

Files

Configuration

Name: tessl/npm-svgo
Author: tessl

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

Capabilities

Load Configuration

Load SVGO configuration from files or search for config files automatically.

/**
 * Load SVGO configuration from a file or search for config files
 * @param configFile - Optional path to config file (absolute or relative)
 * @param cwd - Optional current working directory for relative paths and search
 * @returns Promise resolving to configuration object or null if not found
 */
function loadConfig(configFile?: string, cwd?: string): Promise<Config | null>;

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

Usage Examples:

import { loadConfig } from "svgo";

// Load specific config file
const config = await loadConfig('./my-svgo-config.js');

// Load config with custom working directory
const config = await loadConfig('svgo.config.js', '/path/to/project');

// Auto-search for config files in current directory and parents
const config = await loadConfig();

// Use loaded config with optimize
import { optimize } from "svgo";
const result = optimize(svgString, config);

Configuration File Discovery

When no config file is specified, loadConfig() searches for configuration files in the following order:

svgo.config.js in current directory
svgo.config.mjs in current directory
svgo.config.cjs in current directory
Repeat search in parent directories up to filesystem root

Supported Config File Formats:

// svgo.config.js (ES Module)
export default {
  multipass: true,
  plugins: [
    'preset-default',
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-*']
      }
    }
  ]
};

// svgo.config.cjs (CommonJS)
module.exports = {
  floatPrecision: 2,
  plugins: ['preset-default']
};

// svgo.config.mjs (ES Module)
export default {
  js2svg: {
    pretty: true,
    indent: 2
  }
};

Configuration Validation

Configuration files must export a valid configuration object.

// Valid configuration object structure
interface Config {
  /** File path context for plugins */
  path?: string;
  /** Enable multiple optimization passes */
  multipass?: boolean;
  /** Floating point precision for numeric values */
  floatPrecision?: number;
  /** Plugin configuration array */
  plugins?: PluginConfig[];
  /** SVG output formatting options */
  js2svg?: StringifyOptions;
  /** Data URI output format */
  datauri?: DataUri;
}

Configuration Examples:

// Basic configuration
{
  plugins: ['preset-default']
}

// Advanced configuration
{
  multipass: true,
  floatPrecision: 2,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          cleanupIds: {
            preserve: ['important-id']
          }
        }
      }
    },
    'removeDimensions',
    {
      name: 'addClassesToSVGElement',
      params: {
        classNames: ['optimized-svg']
      }
    }
  ],
  js2svg: {
    pretty: true,
    indent: 2,
    finalNewline: true
  }
}

Plugin Configuration Types

Different ways to configure plugins in the configuration file.

type PluginConfig = 
  | string  // Plugin name with default parameters
  | {
      name: string;
      params?: any;
      fn?: Plugin;  // Custom plugin function
    }
  | CustomPlugin;

interface CustomPlugin<T = any> {
  name: string;
  fn: Plugin<T>;
  params?: T;
}

Plugin Configuration Examples:

// String format (default parameters)
{
  plugins: [
    'removeComments',
    'cleanupAttrs',
    'preset-default'
  ]
}

// Object format with parameters
{
  plugins: [
    {
      name: 'convertColors',
      params: {
        currentColor: true,
        names2hex: false,
        rgb2hex: true,
        shorthex: true,
        shortname: true
      }
    }
  ]
}

// Custom plugin
{
  plugins: [
    {
      name: 'customPlugin',
      fn: (root, params, info) => {
        return {
          element: {
            enter(node) {
              // Custom optimization logic
            }
          }
        };
      },
      params: {
        customParam: 'value'
      }
    }
  ]
}

Preset Configuration

Configure the default preset with custom overrides.

interface PresetDefaultConfig {
  /** Floating point precision override */
  floatPrecision?: number;
  /** Override individual plugin settings */
  overrides?: {
    [pluginName: string]: any | false;  // false disables the plugin
  };
}

Preset Override Examples:

// Disable specific plugins in preset-default
{
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,  // Keep viewBox
          removeDesc: false,     // Keep description elements
          cleanupIds: false      // Don't optimize IDs
        }
      }
    }
  ]
}

// Customize plugin parameters within preset
{
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          convertColors: {
            currentColor: true,
            names2hex: false
          },
          cleanupNumericValues: {
            floatPrecision: 3
          }
        }
      }
    }
  ]
}

Environment-Specific Configuration

Configuration can vary based on the environment or use case.

// svgo.config.js
const isProduction = process.env.NODE_ENV === 'production';

export default {
  multipass: isProduction,  // Only multipass in production
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // Keep IDs in development for debugging
          cleanupIds: isProduction,
          // Pretty print in development
          ...(isProduction ? {} : { pretty: true })
        }
      }
    }
  ],
  js2svg: {
    pretty: !isProduction,
    indent: isProduction ? 0 : 2
  }
};

Configuration Errors

Common configuration errors and how to handle them.

import { loadConfig } from "svgo";

try {
  const config = await loadConfig('./invalid-config.js');
} catch (error) {
  if (error.message.includes('Invalid config file')) {
    console.error('Config file must export an object');
  } else if (error.message.includes('Module not found')) {
    console.error('Config file not found');
  } else {
    console.error('Config loading failed:', error.message);
  }
}

// Config validation happens during optimize() call
import { optimize } from "svgo";

try {
  const result = optimize(svgString, {
    plugins: null  // Invalid: must be array
  });
} catch (error) {
  console.error('Invalid configuration:', error.message);
}

Install with Tessl CLI