使用<g>定义图形模块并用<use>调用是最直接有效的SVG复用方式；关键在于结构清晰、定义集中、引用可控，建议将<g>置于<defs>中并设唯一id，通过href="#id"引用，支持样式继承与覆盖。
用 <g> 定义图形模块，再用 <use> 多次调用，是构建可维护 SVG 复杂图形最直接有效的方式。关键不在堆砌代码，而在结构清晰、定义集中、引用可控。
用 <g> 封装可复用的图形单元
<g> 是 SVG 的分组容器，本身不渲染，但能统一管理子元素的位置、颜色、变换等属性。把它当作“图形组件”来设计，比零散写 <path> 或 <circle> 更易维护。
- 给
<g>设置唯一id（如id="icon-check"），后续才能被引用 - 可在
<g>上直接设通用样式，比如fill="currentColor"或stroke="#333"，子元素会继承 - 内部坐标建议以
(0, 0)为原点设计，避免偏移干扰复用定位 - 可嵌套
<title>和<desc>提升可访问性，例如：<title>确认图标</title>
用 <use> 实例化并灵活摆放
<use> 不复制图形数据，而是创建一个指向原始 <g> 的“实例”。改一次定义，所有引用自动更新——这是真正意义上的复用。
-
href必须带#前缀，如href="#icon-check"；旧写法xlink:href已废弃，现代浏览器只认href -
x和y是相对于原始<g>坐标系的平移量，不是绝对位置。例如原始<g>内部有个<circle cx="10" cy="10">，<use x="100" y="50">会让整个组右移 100、下移 50 - 可在
<use>上覆盖样式，比如fill="red"或transform="scale(1.2) rotate(45)"，优先级高于原始定义 - 多个
<use>可共用同一个id，无需重复定义
把 <g> 放进 <defs> 更规范
<defs> 是专为“不直接显示、仅供引用”而设的容器。把 <g> 放在里面，语义更明确，也避免意外渲染或布局干扰。
- 所有可复用模块建议统一放在
<svg>开头的<defs>中，便于查找和管理 -
<defs>内部内容默认不渲染，即使漏写display:none也安全 - 不推荐把
<g>直接写在<svg>根层再用<use>引用——容易因解析顺序出错，尤其动态插入时 - 如果图形需独立缩放控制（如图标），优先用
<symbol>替代<g>，它自带viewBox，适配更稳
常见问题与避坑提示
很多“图标不显示”或“位置错乱”，其实不是语法错，而是结构或属性细节没对齐。
- 控制台报
Failed to execute 'use' on 'SVGElement': The provided value is not a valid URL→ 检查href是否漏了#，或 ID 拼写/大小写是否完全一致 - 图标颜色不变 → 确保原始
<g>内路径没写死fill="#000"，应设为fill="currentColor"，再靠父级 CSS 控制 - 缩放后变形 →
<g>本身不支持viewBox，如需等比缩放，请改用<symbol>包裹 - IE 兼容需求 → 可同时写
xlink:href="#id" href="#id"，但现代项目通常无需支持 IE
