基本示例
要将内联 SVG 包含在 HTML 文件中，请将整个 SVG 文件粘贴到 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" fill="url(#gradient)" />
<circle cx="50" cy="50" r="30" fill="url(#gradient)" />
</svg>
</body>
</html>
讨论
该页面是常规的 HTML 和 CSS，其中包含一个 SVG。唯一有趣的部分是它包含的 <svg> 元素。该元素及其子元素被声明为 SVG 命名空间。该元素包含一个渐变和两个用渐变填充的形状。渐变色停止通过 CSS 设置颜色。
有三个值得注意的属性和一个嵌套元素
-
viewBox属性建立了一个逻辑坐标系，SVG 图像的坐标相对于该坐标系。在本例中，我们的图像布局在一个 100x100 的视口中。 -
preserveAspectRatio属性指定通过将图像居中放置在可用尺寸内、按高度或宽度最大化尺寸并截断任何溢出来保留 纵横比。 -
包含
role="img"可确保辅助技术将 SVG 作为图像处理。 -
SVG 内的
<title>提供了图形的可访问的简短文本描述。标题文本不会被渲染，但浏览器可能会在 SVG 悬停时将其显示为工具提示。<title>应该是<svg>开始标签后的第一个元素。
最佳实践
当通过 <img> 元素包含 SVG 时，alt 属性提供替代文本，使图像可访问。内联 SVG 不支持 alt 属性。但它支持其他几种使其可访问的方式。对于内联 SVG，源在 DOM 中可用，这意味着内联 SVG 文件中的所有标记都可以被可访问性对象模型 (AOM) 访问。包含 <title> 元素可提供该替代文本。
如果图像传达的信息比简短标题更多，请使用 <desc> 元素包含更长的描述。<desc> 元素提供了一个可访问的长文本描述。与 <title> 文本类似，<desc> 中的文本不会被渲染到屏幕上。
如果 SVG 可以被可见文本标记，请使用 aria-labelledby 属性引用该文本。或者，将 aria-labelledby 属性与 <title> 的 id 一起包含。
<svg viewBox="0 0 100 125" role="img" aria-labelledby="svgTitle svgDescription">
<title id="svgTitle">Manual</title>
<desc id="svgDescription">
A nondescript twelve page booklet opened to the middle page
</desc>
<defs>
<style>
rect {
fill: #cccccc;
stroke: #666666;
transform-origin: top;
}
</style>
</defs>
<rect width="36" height="60" x="13" y="18" ry="2" transform="skewy(24deg)" />
<rect width="39" height="60" x="11" y="20" ry="2" transform="skewY(18deg)" />
<rect width="42" height="90" x="8" y="22" ry="2" transform="skewY(12deg)" />
<rect width="36" height="60" x="50" y="18" ry="2" transform="skewY(-24deg)" />
<rect width="39" height="60" x="50" y="20" ry="2" transform="skewY(-18deg)" />
<rect width="42" height="90" x="50" y="22" ry="2" transform="skewY(-12deg)" />
</svg>
如果 SVG 可以被可见文本描述，则可以使用 aria-describedby 属性引用该文本。如果使用了 aria-describedby，它将优先于 <desc>。
在我们的示例中，我们在 aria-labelledby 属性中包含了描述和标题，因为它比 aria-describedby 具有更好的辅助技术支持。