内联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>
• 必须置于 `` 内，或嵌套在 `
  `、``、`

  ` 等合法容器中

  不支持 XML 声明（如 ``）和 CDATA 块，粘贴前需手动删掉

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！