能否将SVG的<defs>定义集合移至外部文件进行引用？

你完全可以把字符路径的defs定义单独存成一个SVG文件，就像外部CSS那样引用，不用<img>标签，主要有两种常用方式：

方法1：直接在<use>中引用外部SVG的ID #

这是最直接的方式，和你现在用内部ID的逻辑几乎一致，只是把href的值改成外部SVG文件路径+#目标ID。

步骤： #

1. 把所有defs里的字符路径提取到单独的SVG文件（比如命名为char-defs.svg），文件结构如下：

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- capital_A -->
        <g id="ascii41" fill-rule="nonzero" transform="translate(0.25,2.90)">
            <path d="M 6.144 10.112 L 3.744 2.832 L 1.328 10.112 L 0 10.112 L 3.568 0 L 3.952 0 L 7.52 10.112 L 6.144 10.112 Z M 5.248 6.384 L 5.52 7.392 L 1.808 7.392 L 2.048 6.384 L 5.248 6.384 Z" />
        </g>
        <!-- 其他字符的g定义... -->
    </defs>
</svg>

2. 修改你原有的JavaScript代码，把href属性指向外部文件：

let use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
// 这里加上外部SVG文件的路径
use.setAttribute('href', `char-defs.svg#ascii${asciiCode.toString(16)}`);
groupOfUses.insertBefore(use, currentUse);

方法2：将外部SVG的defs嵌入主页面的defs中 #

如果担心多次请求外部文件，或者需要更好的兼容性，可以把外部SVG的defs内容加载到主页面的SVG defs里，这样后续的<use>还是用内部ID引用。

步骤： #

1. 同样准备好char-defs.svg文件。
2. 用JavaScript加载外部SVG并插入到主SVG的defs中：

// 加载外部defs文件
fetch('char-defs.svg')
  .then(response => response.text())
  .then(svgText => {
    // 创建临时元素解析SVG内容
    const tempSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    tempSvg.innerHTML = svgText;
    // 获取defs元素并插入到主SVG的defs中
    const externalDefs = tempSvg.querySelector('defs');
    const mainSvg = document.querySelector('svg');
    let mainDefs = mainSvg.querySelector('defs');
    if (!mainDefs) {
      mainDefs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
      mainSvg.insertBefore(mainDefs, mainSvg.firstChild);
    }
    mainDefs.appendChild(externalDefs);
  });

之后你的原有<use>代码不用修改，依然可以用#asciiXXX引用。

注意事项 #

• 跨域限制：如果你的页面和外部SVG文件不在同一个域名（或端口、协议），需要配置CORS规则，否则浏览器会阻止引用。本地开发时，建议用本地服务器（比如Node.js的http-server）打开页面，避免Chrome等浏览器的本地文件跨域限制。
• 浏览器兼容性：现代主流浏览器（Chrome、Firefox、Edge、Safari）都支持外部SVG的ID引用，无需担心兼容性问题。

内容的提问来源于stack exchange，提问作者user2171796