HTML5 中的 SVG

HTML 中的 SVG

在现代 HTML 中，你可以将可缩放矢量图形（Scalable Vector Graphics, SVG）元素直接嵌入到你的 HTML 页面中。这允许你将矢量图形与其他网页内容无缝集成。

将 SVG 直接嵌入 HTML 页面

下面是一个简单的 SVG 图形嵌入到 HTML 页面的示例：

抱歉，您的浏览器不支持内联 SVG。

下面是上面示例的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First SVG</title>
</head>
<body>
  <h1>My First SVG</h1>
  <svg width="100" height="100" aria-labelledby="svgTitle" role="img">
    <title id="svgTitle">A yellow circle with a green border</title>
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
</body>
</html>

SVG 代码解释：

• 一个 SVG 图像以 <svg> 元素开始。最佳实践是在 <svg> 元素内包含 aria-labelledby 和 role="img" 属性以及一个 <title> 元素，以增强可访问性。
• <svg> 元素的 width（宽度）和 height（高度）属性定义了 SVG 画布的尺寸。
• <circle> 元素用于绘制一个圆形。
• cx 和 cy 属性定义了圆心的 x 和 y 坐标。如果省略 cx 和 cy，圆心默认为 (0,0)。
• r 属性定义了圆的半径。
• stroke 和 stroke-width 属性控制图形轮廓（描边）的外观。这里，圆形有一个 4px 宽的绿色描边。
• fill 属性指定图形内部的颜色。我们将其填充颜色设置为黄色。
• 闭合标签 </svg> 标志着 SVG 图像的结束。注意，像 <circle /> 这样的元素在 XML 语法中可以是自闭合的。

**重要提示：**由于 SVG 是基于 XML 的，所有元素都必须正确闭合。对于没有内容的元素，你可以使用自闭合标签（例如，<circle />）。

**可访问性技巧：**始终在 <svg> 元素内包含一个 <title> 元素，为辅助技术提供图形的文本描述。你还可以使用 <desc> 元素提供更详细的描述。