按钮内联SVG最稳，必须删内联fill/stroke、设viewBox、用fill="currentColor"并由父级color控制颜色，否则hover变色、暗黑模式适配和响应式缩放均失效。

按钮里直接写<svg>最稳，别用<img>

想让按钮图标响应 hover、适配暗色模式、或点击时变色？<img src="icon.svg">不行——它是个黑盒，button:hover svg path根本选不到内部元素。必须把 SVG 代码直接塞进按钮里：

<button><svg><path d="..."></svg></button></p>
<ul>
<li>删掉导出 SVG 中所有 <code>path

、circle 上的 fill 和 stroke 属性，否则 CSS 控制不了颜色

<svg> 标签必须带 viewBox（比如 viewBox="0 0 24 24"），再配 width/height 或 CSS 尺寸，否则可能空白或拉伸

想让图标自动继承按钮文字颜色？给 path 加 fill="currentColor"，然后用 button { color: #007bff; } 统一控制

IE11 和旧安卓 WebView 支持 currentColor，但部分场景下 <use> 不可用，内联时直接避开

用 CSS 控制 SVG 图标颜色和状态

内联 SVG 的优势就在这儿：path 是真实 DOM 节点，能被 CSS 精准命中。但优先级容易翻车——设计工具导出的 SVG 常带 fill="#333" 这种内联样式，会挡住 button path { fill: red }。

• 写法要分两层：button.icon path { fill: currentColor; } + button.icon { color: var(--primary); }
• hover 变色直接写：button:hover path { fill: #ff6b6b; }，不用 JS
• 禁用态加一层：button:disabled path { opacity: 0.5; }
• 避免用 svg { width: 100%; height: auto; } —— 旧版 Safari 渲染异常，改用 svg { display: block; width: 1.5em; height: 1.5em; }

<object>嵌入 SVG 按钮？多数情况不值得

有人想复用外部 SVG 文件又保留交互能力，于是用 <object data="icon.svg">。结果发现：JS 必须等 load 事件后才能访问 contentDocument，跨域直接失败，IE 和旧 WebView 对 load 触发不可靠，fallback 内容还得手写。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 按钮图标体积小，内联比发 HTTP 请求更快更稳
• 如果真要用 <object>，必须加 aria-label 和 fallback：<object data="menu.svg" type="image/svg+xml" aria-label="菜单"><img src="menu-fallback.png" alt="菜单"></object>
• 别指望 button:hover object svg path 生效——object 是独立文档，父级 CSS 穿透不了

按钮尺寸和对齐容易错在哪

SVG 默认 display: inline，直接塞进按钮里常在底部留白，看着像没对齐；或者设了 width 却漏 viewBox，图形糊成一团。

立即学习“前端免费学习笔记（深入）”；

• 加 vertical-align: middle 或 display: flex 消除基线间隙
• viewBox 值必须和原始设计稿一致（Figma 导出默认是 "0 0 24 24"），改它等于重绘坐标系
• 响应式按钮里别只靠 width: 100% 控制 SVG 大小，配合 viewBox 才能等比缩放
• 模糊或偏移？不是分辨率问题，八成是 viewBox 和内部路径坐标没对齐，比如 <circle cx="12" cy="12"> 但 viewBox="0 0 16 16" 就会切掉边缘

真正麻烦的不是怎么放进去，而是删干净内联样式、配对好 viewBox 和尺寸、再把 currentColor 链路走通——这三步漏一个，按钮图标就卡在“看起来差不多，但换色/交互/响应式全失效”的状态。