SVG 在 HTML 中的介绍

概述

本文及其关联示例演示了如何使用内联 SVG。

基本示例

要在 HTML 文件中包含内联 SVG，请将整个 SVG 文件粘贴到 HTML 文件中。

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>SVG Demo</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" role="img">
      <title>A gradient</title>
      <linearGradient id="gradient">
        <stop class="begin" offset="0%" stop-color="red" />
        <stop class="end" offset="100%" stop-color="black" />
      </linearGradient>
      <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
      <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
    </svg>
  </body>
</html>

讨论

该页面是包含单个 SVG 的常规 HTML 和 CSS。唯一有趣的部分是它包含的 <svg> 元素。此元素及其子元素被声明为位于 SVG 命名空间中。该元素包含一个渐变和两个用渐变填充的形状。渐变颜色停止由 CSS 设置其颜色。

有三个属性和一个嵌套元素值得注意

该 viewBox 属性建立了一个逻辑坐标系，SVG 图像的坐标相对于它。在本例中，我们的图片在一个 100x100 的视口中布局。
该 preserveAspectRatio 属性指定必须通过将图片居中在可用大小中来保持纵横比，调整到高度或宽度的最大值，然后切掉任何溢出。
包括 role="img" 可确保辅助技术将 SVG 视为图像。
一个 <title> 在 SVG 中提供了图形的可访问的简短文本描述。标题文本不会渲染，但浏览器可能会在悬停 SVG 时将其显示为工具提示。<title> 应为 <svg> 开启标签后的第一个元素。

最佳实践

当通过 <img> 元素包含 SVG 时，alt 属性提供替代文本，使图像可访问。内联 SVG 不支持 alt 属性。但它确实支持几种其他使其可访问的方法。使用内联 SVG，源代码在 DOM 中可用，这意味着内联 SVG 文件中的所有标记都可供可访问性对象模型 (AOM) 访问。包括 <title> 元素提供了该替代文本。

如果图像传达的信息超过简短的标题，请使用 <desc> 元素包含更长的描述。<desc> 元素提供可访问的长文本描述。与 <title> 文本类似，<desc> 中的文本不会渲染到屏幕上。

如果 SVG 可以用可见文本标记，请使用 aria-labelledby 属性引用该文本。或者，将 aria-labelledby 属性与 <title> 的 id 一起包含。

html

<svg viewBox="0 0 100 125" role="img" aria-labelledby="svgTitle svgDescription">
  <title id="svgTitle">Manual</title>
  <desc id="svgDescription">
    A non-descript twelve page booklet opened to the middle page
  </desc>
  <defs>
    <style>
      rect {
        fill: #cccccc;
        stroke: #666;
        transform-origin: top;
      }
    </style>
  </defs>

  <rect
    width="36"
    height="60"
    x="13"
    y="18"
    ry="2"
    style="transform: skewy(24deg)" />
  <rect
    width="39"
    height="60"
    x="11"
    y="20"
    ry="2"
    style="transform: skewy(18deg)" />
  <rect
    width="42"
    height="90"
    x="8"
    y="22"
    ry="2"
    style="transform: skewy(12deg)" />
  <rect
    width="36"
    height="60"
    x="50"
    y="18"
    ry="2"
    style="transform: skewy(-24deg)" />
  <rect
    width="39"
    height="60"
    x="50"
    y="20"
    ry="2"
    style="transform: skewy(-18deg)" />
  <rect
    width="42"
    height="90"
    x="50"
    y="22"
    ry="2"
    style="transform: skewy(-12deg)" />
</svg>

如果 SVG 可以用可见文本描述，则可以使用 aria-describedby 属性引用该文本。如果使用 aria-describedby，它将优先于 <desc>。

在我们的示例中，我们在 aria-labelledby 属性中同时包含了描述和标题，因为它比 aria-describedby 具有更好的辅助技术支持。

另请参阅

SVG 入门