HTML SVG

HTML SVG 图形

什么是 SVG？

• SVG 是 可缩放矢量图形 (Scalable Vector Graphics) 的缩写。
• 它是一种基于 XML 的语言，用于描述二维矢量图形。
• 矢量图形由数学方程式而非像素定义。这意味着它们可以无限缩放而不失真（与 JPG 或 PNG 等位图图像不同）。
• SVG 是 W3C 标准，得到现代浏览器的良好支持。

HTML <svg> 元素

HTML 允许你使用 <svg> 元素直接嵌入 SVG 图形。这个元素充当你的 SVG 形状、路径、文本和其他图形元素的容器。

常见的 SVG 元素包括 <circle>、<rect>、<line>、<polygon>、<path> 和 <text>。

SVG 图形可以使用 CSS 进行样式设置（包括内联 style 属性和外部/内部样式表），并可以使用 JavaScript 进行操作。

浏览器支持

<svg> 元素受到所有主流现代浏览器（Chrome、Firefox、Safari、Edge）的支持。

(现在具体支持的起始版本号不太重要，因为支持已很广泛。)

示例：SVG 圆形

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

解释：

• <svg>: 定义容器，带有宽度和高度。
• <circle>: 绘制圆形。
• cx、cy: 圆心的坐标。
• r: 圆的半径。
• stroke、stroke-width: 轮廓颜色和粗细。
• fill: 内部填充颜色。

示例：SVG 矩形

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

解释：

• <rect>: 绘制矩形。
• width、height: 矩形的尺寸。
• style: 使用 CSS 属性设置填充和轮廓。

示例：SVG 星形 (使用 Polygon)

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
           style="fill:lime; stroke:purple; stroke-width:5; fill-rule:nonzero;" />
</svg>

解释：

• <polygon>: 绘制连接点的直线形状。
• points: 顶点的 x,y 坐标列表。
• fill-rule: 确定复杂形状内部如何填充 (nonzero 或 evenodd)。

SVG vs. Canvas

HTML 也提供了 <canvas> 元素用于绘制图形，但其工作方式与 SVG 不同：

特性	对比
SVG	Canvas
基于矢量 (形状)	基于像素 (像素)
分辨率无关 (可缩放)	分辨率相关 (缩放时像素化)
每个元素都有 DOM 节点 (利于事件处理)	立即模式绘制 (绘制后没有对象模型)
更适合复杂形状、交互性、可访问性 (文本)。	更适合像素操作、复杂动画、游戏。
元素多时性能可能较慢。	对于大量简单对象或像素效果，性能可能更好。

选择 SVG 的情况：

• 你需要能完美缩放的图形（logo、图标、插画）。
• 你需要与图形特定部分进行交互（形状上的事件监听器）。
• 你需要良好的可访问性（文本保持为文本）。
• 你正在创建图表或数据可视化。

选择 Canvas 的情况：

• 你需要像素级控制。
• 你正在渲染大量对象且对性能要求很高时。
• 你正在构建游戏或复杂的、高帧率的动画。
• 你正在进行图像处理。

要获取更深入的信息，请查阅 MDN SVG 文档。