内联SVG需保留viewBox属性并清除硬编码样式，设width/height无单位，fill改为currentColor，移除xmlns及overflow="hidden"，svg设display:block解决基线对齐问题。
SVG 图形通过 inline 方式直接内联到 HTML 中，就是把 `
必须保留 viewBox 属性
内联 SVG 最小可用结构必须包含 `viewBox`，例如 `viewBox="0 0 24 24"`。它定义了 SVG 的逻辑坐标系，是响应式缩放和比例控制的基础。没有它，仅靠 `width` 和 `height` 容易导致图形拉伸、裁切或只显示局部。
- 推荐显式设置 `width` 和 `height`（如 `width="24" height="24"`），便于布局控制
- 避免使用 `px` 单位，保持数值简洁，利于 CSS 缩放
- 不要复制设计工具导出的 `overflow="hidden"`，它会在缩放时意外截断图形
删掉干扰属性，用 CSS 控制样式
内联 SVG 的核心优势是样式可被外部 CSS 精确控制。为此，需清理原始代码中所有硬编码样式：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 删除所有 `fill`、`stroke`、`opacity` 等内联属性（如 `fill="#333"`）
- 把 `
` 的 `fill` 改成 `fill="currentColor"`，让图标自动继承父元素的 `color` 值 - 移除 `xmlns` 属性（HTML5 中非必需，可能引发解析异常）
- 避免在 `
处理默认显示问题
原生 `
立即学习“前端免费学习笔记（深入）”；
- 给 `
- 需要水平居中时，配合 `margin: 0 auto` 即可
- 若要与文字同行且垂直居中，可用 `vertical-align: middle` 或 `flex` 容器包裹
确保结构放在正确位置
SVG 代码必须出现在 HTML 文档的可渲染区域中：
- 不能放在 ``、`<script>`、`<code>` 或注释块里——浏览器不会解析为图形</script>
- 必须置于 `` 内，或嵌套在 ``、`
