h5中复用svg图形应将集中置于内隐藏中，用引用唯一id的，其viewbox需匹配内部路径坐标，fill设currentcolor以支持css变色。

在 H5 页面中用 `` 复用 SVG 图形，核心是“定义一次、多处调用”，既能减少重复代码，又便于统一维护和样式控制。关键不在写多少 ``，而在于怎么组织定义和引用。

把图形封装进 并放在页面顶部

推荐用 `` 而不是 `` 或 `` 直接定义图标，因为 `` 天然支持 `viewBox`，缩放更可控，语义也更清晰。所有 `` 应集中放在页面 `` 开头一个隐藏的 `

• 用 `
• 每个 `` 必须有唯一 ID（如 `id="icon-search"`）和明确的 `viewBox`（如 `viewBox="0 0 24 24"`）
• 内部图形建议用 `fill="currentColor"`，后续靠 CSS 控制颜色

用 href="#id" 正确引用，别漏掉 # 号

`` 的 `href` 属性必须带 `#` 前缀，指向同文档内已定义的 `` ID。旧写法 `xlink:href` 已废弃，现代浏览器只认 `href`：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 正确写法：<use href="#icon-search"></use>
• 错误写法：<use href="icon-search"></use>（缺 #）、<use xlink:href="#icon-search"></use>（过时）
• ID 区分大小写，不能含空格或中文，例如 `id="Icon-Home"` 比 `id="icon home"` 更稳妥

通过 CSS 或属性灵活控制尺寸与颜色

`` 本身不渲染，但它的实例可独立设置样式，且优先级高于 `` 内部定义：

• 尺寸控制：给 `` 加 `width="24" height="24"`，或用 CSS 设置 `width: 1.2em; height: 1.2em;`，它会按 `viewBox` 等比缩放
• 颜色响应：外层元素设 `color: #007bff;`，`` 上加 `fill: currentColor`，图标就自动随文字变色
• 避免 `transform: scale()`，它放大的是像素，不是矢量，高 DPI 下会模糊

注意常见不显示问题的排查点

图标空白不是 `` 不工作，往往是基础条件没满足：

• 必须在 DOM 中提前存在——不能放在 `<script>` 后、不能靠 JS 动态插入再渲染 `<use>`</script>
• 检查控制台是否报错 “Failed to execute 'use'... The provided value is not a valid URL”——说明 `href` 值无效或 ID 找不到
• 确认 `` 有 `viewBox`，且内部路径坐标落在该范围内（比如 `viewBox="0 0 24 24"` 就别写 `d="M100 100..."`）
• 不要把 `` 塞进 ``，虽然不报错，但属于误用，部分 Safari 版本会解析异常