HTML Academy · 课时

内联 SVG 与 img、object

Q: 「内联 SVG 与 img、object」这节课中我会学到什么？

根据使用场景选择合适的 SVG 嵌入方式 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

根据使用场景选择合适的 SVG 嵌入方式

内联 SVG 与 img、object 是 CoddyKit 上的免费 HTML Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

嵌入 SVG 的三种方式

SVG（可缩放矢量图形）可以通过三种方式嵌入：

<img src="icon.svg"> — 简单、可缓存，但无法访问 JS/CSS
<object data="chart.svg"> — 支持内联交互，但使用独立文档
在 HTML 中直接嵌入 SVG — 可完整访问 CSS/JS，且无需额外请求

通过图像引用嵌入 SVG

最简单的方法：将 SVG 作为图像引用：

<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
     cannot use SVG filters or animations from CSS -->

CSS 背景图 SVG

将 SVG 用作 CSS 背景图，以显示装饰性图标：

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->

object 元素中的 SVG

使用 <object> 嵌入 SVG，以实现交互式 SVG：

<object
  type="image/svg+xml"
  data="interactive-chart.svg"
  width="800"
  height="400"
  aria-label="Interactive revenue chart"
>
  <!-- Fallback: -->
  <img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
     SVG document is somewhat isolated from parent page -->

内联 SVG

将 SVG 直接嵌入 HTML，以获得完整控制：

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  focusable="false"
>
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
</svg>

内联 SVG 的优势

为什么使用内联 SVG：

完整的 CSS 样式：fill、stroke、过渡和动画
JavaScript 交互：选择 SVG 元素并监听事件
currentColor：从父级 CSS 继承颜色
无需额外的 HTTP 请求
配合 role 和 title，可以将其纳入可访问性树

内联 SVG 的缺点

内联 SVG 的缺点：

HTML 文件会变大
浏览器不会单独缓存它
如果不复制内容，就难以在多个页面上重复使用同一个 SVG
重复图标会导致代码重复

使用元素制作精灵图

只定义一次 SVG 图标，再通过 <use> 引用它们：

<!-- Icon sprite (often hidden): -->
<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
</svg>

<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>

无障碍 SVG

让内联 SVG 具备可访问性：

<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative paths -->
</svg>

<!-- focusable="false" needed for IE to prevent tab focus -->

currentColor 技巧

使用 currentColor 从 CSS 继承文本颜色：

<button class="btn btn-primary">
  <svg aria-hidden="true" width="16" height="16">
    <path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
  </svg>
  Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
     When button is hovered/focused, icon color changes too
     No need for separate icon color rules -->

快速检查

与使用图像引用 SVG 相比，内联 SVG 的主要优势是什么？

回顾：SVG 嵌入

嵌入 SVG 的要点：

<img src> — 简单；无法访问 CSS/JS；可缓存
CSS 背景图 — 仅用于装饰
<object data> — 交互式 SVG；具有一定隔离性
内联 SVG — 完整的 CSS/JS 控制；无需额外请求
使用 <symbol> + <use> 的 SVG 精灵图 — 高效复用

常见问题解答

「内联 SVG 与 img、object」课时是免费的吗？

是的 — 「内联 SVG 与 img、object」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「内联 SVG 与 img、object」这节课中我会学到什么？

根据使用场景选择合适的 SVG 嵌入方式你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「内联 SVG 与 img、object」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy