# 全局安装 CLI
npm install -g svgo
 
# 项目依赖安装
npm install svgo
 
# 使用 npx 运行（无需安装）
npx svgo input.svg -o output.svg

// svgo.config.js
module.exports = {
  multipass: true, // 多次优化迭代
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // 禁用特定插件
          removeViewBox: false,
          removeTitle: false,
        }
      }
    },
    // 添加额外插件
    'prefixIds',
    {
      name: 'removeAttrs',
      params: {
        attrs: ['data-name', 'fill']
      }
    }
  ]
};

# CLI 基本使用
svgo input.svg
 
# 指定输出文件
svgo input.svg -o output.svg
 
# 批量处理目录
svgo -f ./svg-files -o ./optimized
 
# 指定配置
svgo --config=svgo.config.js input.svg
 
# 显示优化前后大小对比
svgo --pretty input.svg

// JavaScript API 使用
import { optimize } from 'svgo';
import fs from 'fs';
 
const svgContent = fs.readFileSync('input.svg', 'utf8');
 
const result = optimize(svgContent, {
  plugins: [
    'preset-default'
  ]
});
 
fs.writeFileSync('output.svg', result.data);
console.log(`优化前: ${svgContent.length} bytes`);
console.log(`优化后: ${result.data.length} bytes`);
console.log(`节省: ${((1 - result.data.length / svgContent.length) * 100).toFixed(1)}%`);

// 自定义插件示例
export default {
  name: 'myCustomPlugin',
  description: '自定义优化插件',
  fn: (root, params, info) => ({
    // 进入元素节点时调用
    element: {
      enter: (node, parentNode) => {
        // 修改节点属性
        if (node.name === 'circle') {
          node.attributes.fill = 'none';
        }
      },
      exit: (node, parentNode) => {
        // 离开节点时调用
      }
    },
    // 处理注释节点
    comment: {
      enter: (node) => {
        // 删除特定注释
      }
    },
    // 处理文本节点
    text: {
      enter: (node) => {}
    }
  })
};

# 创建自定义插件
mkdir my-svgo-plugin
cd my-svgo-plugin
npm init -y
 
# 编写插件
cat > index.js << 'EOF'
export default {
  name: 'myPlugin',
  type: 'perItem', // 或 'full'
  fn: (item, params, info) => {
    // 优化逻辑
    return item;
  }
};
EOF

// svgo.config.js（CommonJS）
module.exports = { /* ... */ };
 
// svgo.config.mjs（ESM）
export default { /* ... */ };
 
// svgo.config.cjs（强制 CommonJS）
module.exports = { /* ... */ };

# GitHub Actions 示例
name: Optimize SVGs
on: [push]
jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npx svgo -f public/icons -o public/icons-optimized
      - run: |
          # 检查是否有变化
          if git diff --quiet public/icons; then
            echo "No changes"
          else
            echo "SVGs were optimized"
          fi

# 检查当前版本
svgo --version
 
# 升级到最新版本
npm install svgo@latest

// 生产环境推荐配置
module.exports = {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,  // 保留 viewBox
          removeTitle: false,    // 保留 title（可访问性）
        }
      }
    },
    'removeScripts',       // 移除脚本（v4）
    'prefixIds',           // ID 前缀（多 SVG 场景）
  ]
};

// svgo.config.js — 生产环境推荐配置
module.exports = {
  multipass: true,
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // v4 已默认禁用，显式声明更清晰
          removeViewBox: false,
          removeTitle: false,
          // 如果不需要保留 ID
          cleanupIds: true,
        }
      }
    },
    // 移除脚本和事件处理器（v4）
    'removeScripts',
    // 排序属性以获得更好的 gzip 压缩
    {
      name: 'sortAttrs',
      params: {
        order: ['id', 'width', 'height', 'x', 'y', 'cx', 'cy', 'd']
      }
    }
  ]
};

// 错误：丢失了 preset-default
module.exports = {
  plugins: ['prefixIds']  // 只有 prefixIds，其他优化全丢
};
 
// 正确：包含 preset-default
module.exports = {
  plugins: [
    { name: 'preset-default' },
    'prefixIds'
  ]
};

// 图标优化推荐配置
module.exports = {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
          cleanupIds: {
            remove: true,
            minify: true
          }
        }
      }
    },
    // 移除所有 fill 和 stroke（通过 CSS 控制颜色）
    {
      name: 'removeAttrs',
      params: {
        attrs: ['fill', 'stroke', 'style']
      }
    },
    // 设置默认 viewBox
    {
      name: 'addAttributesToSVGElement',
      params: {
        attributes: [
          { 'aria-hidden': 'true' }
        ]
      }
    }
  ]
};

// v3 配置
module.exports = {
  plugins: [
    { name: 'preset-default' },
    { name: 'removeScriptElement' }  // v3 插件名
  ]
};
 
// v4 配置（注意插件重命名）
module.exports = {
  plugins: [
    { name: 'preset-default' },
    { name: 'removeScripts' }  // v4 重命名，功能增强
  ]
};