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