#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 是更好的选择。