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

ts 复制代码
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?

ts 复制代码
<>
  {/* def */}
  <svg><def>...</def></svg>
  {/* 实际内容 */}
  <svg><g>...</g></svg>
</>

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

ts 复制代码
<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 都注入一次

ts 复制代码
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 了,干脆直接处理成

ts 复制代码
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);
  }, []);
相关推荐
漂流瓶jz13 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码13 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v13 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
webYin14 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip14 小时前
结合Worker通知应用更新
前端·javascript
叶玳言14 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
高级测试工程师欧阳14 小时前
HTML 基本结构
前端
Gazer_S14 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
一只小阿乐14 小时前
Html重绘和重排
前端·html
_Rookie._14 小时前
vue3 使用css变量
前端·javascript·html