内联svg需直接写标签，设viewbox与width/height防变形，用fill="currentcolor"配合css控制颜色，导出后清理冗余代码。
直接写 <svg></svg> 标签就行，不用额外加载
HTML 里嵌入 SVG 最简单、最可控的方式就是内联——把 SVG 的 XML 内容直接写进 HTML 源码里，用 <svg></svg> 开始， 结束。它不是图片，不是链接，就是一段可操作的 DOM 元素。
常见错误是试图像 <img src="icon.svg"> 那样“引用”，结果发现没法用 CSS 控制颜色、不能用 JS 绑定点击事件、hover 动画也失效。内联 SVG 才能真正参与页面交互和样式流。
- SVG 内容必须写在 HTML 文档的 body 或合法容器内（比如
<div>），不能放在 <code>里当资源声明 - 注意命名空间：现代 HTML5 中无需写
xmlns="http://www.w3.org/2000/svg"，浏览器自动识别；但若从设计工具导出带命名空间的 SVG，保留也无害 - 避免直接复制含
<?xml ...?>声明或..>的整段 SVG 文件内容——这些在 HTML 中非法，会触发解析错误 -
viewBox="0 0 100 100"定义坐标系范围，是缩放锚点，不是像素尺寸 - 只写
width="24"且无height，SVG 会等比缩放；写了width和height但没preserveAspectRatio，可能强制拉伸 - 加
preserveAspectRatio="xMidYMid meet"（默认值）确保居中、不裁切、保持比例
<svg></svg> 的宽高怎么设才不拉伸变形
内联 SVG 默认尺寸是 300×150 像素（浏览器设定），跟 <canvas></canvas> 类似。如果原始图形有 viewBox，却没设 width/height，它可能撑满父容器或按默认尺寸渲染，导致糊掉或留白。
正确做法是：**同时设置 viewBox 和显式的 width / height，或只设 viewBox + width（高度自适应）**。
示例：
<svg width="24" height="24" viewbox="0 0 24 24" fill="none"><path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z" fill="currentColor"></path></svg>
怎么用 CSS 控制内联 SVG 的颜色和状态
关键点：只有用 fill、stroke 等属性写在 SVG 元素上（如 <path fill="red"></path>），或者用 currentColor，才能被外部 CSS 影响。硬编码成 #ff0000 就锁死了。
- 把需要动态变色的部分设为
fill="currentColor"，然后用 CSS 设置父元素或 SVG 自身的color，就能联动变化 -
<svg></svg>标签本身支持class和style，可直接加class="icon icon--warning"写对应 CSS 规则 - 伪类如
:hover可以作用于<svg></svg>或内部<path></path>，但需确保没有用!important锁死内联样式 - 不要对
<svg></svg>设display: inline-block以外的 display 值（比如flex），否则可能破坏基线对齐或尺寸计算
从 Figma / Illustrator 导出后要手动清理什么
设计工具导出的 SVG 通常带冗余代码：编辑器 ID、注释、无用 group、多余命名空间、自动添加的 style 属性。这些不仅增大体积，还可能干扰样式继承或 JS 查询。
- 删掉所有
id属性（除非你真要用document.getElementById()找某个 path） - 删掉
<defs></defs>里未被引用的渐变或 symbol（或确认它们确实被<use></use>调用了） - 把
fill="#000"改成fill="currentColor"，方便后续统一控制 - 移除
style="fill:#000;"这类内联 style，统一用属性写法更稳定 - 检查是否有
transform应用在 group 上却没合并到子元素路径——会导致 JS 获取getBBox()偏移
清理完的 SVG 更轻、更可控，也更容易写成 React 组件或 Vue 的 template 内容。
内联 SVG 看似简单，但真正用好，得盯住三件事：viewBox 和尺寸的配合、currentColor 的使用时机、以及导出后那几行看似无害的冗余属性——它们往往在上线后某个深夜突然让图标变灰、错位或无法响应 hover。
