def id 重复引发的 svg 复用的一些思考

svg def 的作用域是整个 document ，导致把 svg 直接导入作为xml使用时，会发生 两个 svg 实例互相影响的情况：

document 中靠上的 svg 实例本身 display none（或祖先元素）导致的隐藏，会把 def 中预定义的渐变色（或其他东西）也给隐藏掉，导致第二个 svg 实例显示异常

方案1

使用 image + url ，仅有颜色变更的 svg 状态切换需要出两个 png

• 坑：切成png，不要切svg，在 ios safari 上遇到了初始化渲染 svg 图片空白的问题，很迷，怎么都没法救

方案2

仍然使用 svg for ReactComponent，但是转化为组件导出，每个实例使用不同的 id

export default function AIIcon() {
  const uidClip = useRef(uniqueId('_icon_id'));
  const uidFill = useRef(uniqueId('_icon_id'));
  const uidFilter = useRef(uniqueId('_icon_id'));

  return (
    <svg
      fill="none"
      version="1.1"
      viewBox="0 0 16 16"
    >

方案3

是否可以将所有的 svg def 统一管理？设计工具导出的 svg def 如果 id 一致，理论上来说内容也会是一致的

如何统一管理？

loader？

如何管理导入？

创建一个单纯的 <svg><def>...</def></svg>来管理预定义内容？

统一导入如何解决冗余问题？

是否可以分开导入？

构建为 tsx ?做一个插件转换设计工具自动导出的svg代码？或者写loader？

<>
  {/* def */}
  <svg><def>...</def></svg>
  {/* 实际内容 */}
  <svg><g>...</g></svg>
</>

实测失败，会响应 flex gap，有没有什么更好的方案？有空问问gpt

<svg viewBox="0 0 0 0" width="0" height="0" style="width: 0;height: 0;">
  <defs>...</defs>
</svg>

更新：

思路总体上没错，gpt推荐了一个方案，后面研究一下

方案二：用 Sprite 图（集中管理 <defs>）

这是一种更"集中管理"的方式，将所有 SVG 的 <defs> 提前注入到 HTML 中的一个隐藏 <svg>，然后所有引用通过 <use xlink:href="#gradient-a"> 来使用，避免重复。

工具有：

• svg-sprite-loader（适合 webpack）
• vite-plugin-svg-icons
• svgstore（结合 vite 或 webpack）

这个方案适合你要彻底解决所有 SVG 重复 defs 的问题，并减少 HTML 体积。

更新2：

svg 雪碧图 这个库还是会影响分包优化，而且似乎和svgr是冲突的，没有仔细研究

整理了现有的东西，在没有引入新的库的前提下，目前确定了一个比较麻烦的方案

1. 不需要变色 & 要复用的 优先用 png + img

2. 需要变色 & 不需要复用的 直接用原本的 svg 方案

3. 需要变色 & 要复用的 转组件，目前实践了两套方案

   a. 直接转化为tsx（就是上面的方案），缺点是 def 内的内容较多时要生成比较多的id；服务端渲染和客户端渲染会水合错误，useRef 会跑两次

   b. 使用 createPortal 将 def 注入到 body（head没用），每个 icon 都注入一次

const BgSvgContent = (props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) => {
  return (
    <>
      {createPortal(
        <svg fill="none" version="1.1" width="731" height="731" viewBox="0 0 731 731" style={{ position: 'fixed', top: '-100vh', left: '-100vw' }}>
          <defs>
            <!-- ... -->
          </defs>
        </svg>,
        document.body
      )}
      <svg fill="none" version="1.1" width="" height="" viewBox="" {...props}>

或许应该重新审视 svg 方案本身的价值，就像 svg / canvas 比对时一样

更新3：

反正都已经是 React Component 了，干脆直接处理成

import { uniqueId } from 'lodash-es';
import { SVGProps, useEffect } from 'react';

const svgId = uniqueId('svg_');

const svgContent = `
  <svg id="${svgId}"
    ....
    style="position: fixed; top: -100vh; left: -100vw; z-index: -1;"
  >
    <defs>
      ...
    </defs>
  </svg>`;

// 组件内
  useEffect(() => {
    // Ensure the SVG is only rendered once
    if (document.getElementById(svgId)) {
      return;
    }

    document.body.insertAdjacentHTML('beforeend', svgContent);
  }, []);