HTML5 SVG

SVG (Scalable Vector Graphics) 是一种用于描述二维矢量图形的、基于 XML 的标记语言。它是 W3C 的一个开放标准。

与 Canvas 不同，SVG 不是基于像素的，而是通过数学方程来定义形状。这意味着你可以无限放大 SVG 图像而不会有任何质量损失，使其非常适合用于 Logo、图标和需要高保真度的插图。

在 HTML 中使用 SVG

你可以直接将 <svg> 标签嵌入到 HTML 文档中来创建图形。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

• <svg> 元素是所有 SVG 图形的容器，width 和 height 属性定义了 SVG 图像的尺寸。
• <circle> 是预定义的 SVG 形状之一，用于创建一个圆形。
  • cx, cy 定义了圆心的坐标。
  • r 定义了圆的半径。
  • stroke 和 stroke-width 定义了轮廓线的颜色和宽度。
  • fill 定义了形状的填充颜色。

SVG 的优势

• 可伸缩性: 无限缩放不失真，在任何分辨率下都看起来很清晰。
• 可访问性: SVG 是纯文本的 XML，可以被搜索引擎索引，也可以被屏幕阅读器访问。你可以为 SVG 元素添加标题和描述。
• 可操作性: 每个 SVG 形状都是一个 DOM 元素，可以像操作普通 HTML 元素一样，使用 CSS 来设置样式，使用 JavaScript 来添加交互（如事件监听）。
• 文件体积小: 对于简单的图形，SVG 文件通常比位图（如 PNG, JPG）更小。

常见的 SVG 形状

SVG 提供了一系列预定义的形状标签，使得创建常见图形变得非常简单。

• <rect>: 矩形

  <rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

• <line>: 直线

  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />

• <ellipse>: 椭圆

• <polygon>: 多边形（由多条直线连接而成）

• <path>: 路径。这是最强大的 SVG 元素，可以用来创建任何复杂的形状，包括曲线。

SVG vs. Canvas

选择 SVG 还是 Canvas 取决于你的具体需求：

特性	SVG	Canvas
类型	矢量图形 (基于形状)	位图图形 (基于像素)
DOM	每个形状都是一个 DOM 节点	单个 HTML 元素，无内部 DOM
缩放	无损缩放	放大后会失真
交互	可通过 CSS 和 JS 直接操作	需要通过 JS 事件和坐标计算
适用场景	图标、Logo、图表、地图	游戏、图像处理、复杂场景渲染

经验法则: 如果你需要静态、可交互、高保真的图形，优先选择 SVG。如果你需要处理大量像素、进行实时渲染或开发游戏，Canvas 是更好的选择。