基于路径自动化创建新SVG的实现方案咨询

阿华AIGC实验室

2026-5-22

两种可行的自动化方案：npm(Node.js)脚本 vs Automator

一、npm(Node.js)方案（推荐，稳定且跨平台）

手动操作50次确实够折腾的，还碰上Inkscape不稳定，太闹心。用Node.js脚本直接处理SVG数据是更靠谱的选择，完全绕开Inkscape的GUI问题，精准拆分每个州的图形。

步骤：

准备依赖
先初始化一个Node项目，安装两个核心工具库：

svgson：把SVG转换成JSON格式，方便遍历和修改元素
svg-bounding-box：计算每个路径的边界框，用来自动适配新SVG的画布大小

执行命令：

npm init -y
npm install svgson svg-bounding-box

编写拆分脚本
创建一个split-us-states.js文件，代码示例如下（假设原始SVG里每个州的图形是带唯一id的<path>或<g>元素，比如id="alabama"、id="alaska"）：

const fs = require('fs');
const svgson = require('svgson');
const getBBox = require('svg-bounding-box');

// 读取本地的原始美国地图SVG文件
const rawSvg = fs.readFileSync('./Blank_US_Map_(states_only).svg', 'utf8');

svgson.parse(rawSvg, { camelcase: false })
  .then(parsedSvg => {
    // 筛选出所有州的图形元素（根据实际SVG结构调整筛选规则）
    const stateElements = parsedSvg.children.filter(el => 
      el.id && el.id.match(/^[a-z]+$/i) // 假设州的id是纯字母，按需修改
    );

    // 创建输出文件夹
    const outputDir = './individual-states';
    if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);

    stateElements.forEach(stateEl => {
      // 计算当前州图形的边界框，用来适配画布
      const bbox = getBBox(svgson.stringify(stateEl));
      const { x, y, width, height } = bbox;

      // 生成单独的SVG结构
      const stateSvg = {
        name: 'svg',
        attributes: {
          xmlns: 'http://www.w3.org/2000/svg',
          viewBox: `${x} ${y} ${width} ${height}`,
          width: `${width}px`,
          height: `${height}px`
        },
        children: [stateEl]
      };

      // 保存为单独文件，用州的id命名
      const fileName = `${stateEl.id.toLowerCase()}.svg`;
      fs.writeFileSync(`${outputDir}/${fileName}`, svgson.stringify(stateSvg));
      console.log(`已生成：${fileName}`);
    });
  })
  .catch(err => console.error('处理SVG出错：', err));

运行脚本
执行命令即可批量生成所有州的SVG文件：

node split-us-states.js

小提示：如果原始SVG里各州是<g>分组元素，或者id命名规则不同，只要调整脚本里的筛选逻辑就能适配，灵活性很高。

二、Automator方案（依赖Inkscape命令行）

如果你更习惯用macOS自带的Automator，也能基于Inkscape的命令行工具实现，但要注意Inkscape本身的不稳定可能会影响批量处理的成功率。

步骤：

开启Inkscape命令行支持
打开Inkscape，进入偏好设置 > 系统 > 命令行，勾选“允许从命令行运行”，确保终端能直接调用inkscape命令。
创建Automator工作流

打开Automator，新建一个“应用程序”或“快速动作”
添加“运行Shell脚本”动作，选择/bin/bash，输入类似以下的脚本（需要根据原始SVG的元素id调整）：

# 替换成你的原始SVG路径和输出文件夹路径
INPUT_SVG="$HOME/Downloads/Blank_US_Map_(states_only).svg"
OUTPUT_DIR="$HOME/Documents/US-States"
mkdir -p "$OUTPUT_DIR"

# 从SVG中提取所有州的id列表（按需调整匹配规则）
STATE_IDS=$(grep -o 'id="[^"]*"' "$INPUT_SVG" | grep -E 'id="[a-z]+"' | sed 's/id="//;s/"//')

# 批量导出每个州的SVG
for ID in $STATE_IDS; do
  inkscape "$INPUT_SVG" --export-id="$ID" --export-id-only --export-filename="$OUTPUT_DIR/$ID.svg"
done