首页 › HTML › HTML5 图形与绘图 › SVG 基础

SVG（Scalable Vector Graphics）是基于 XML 的矢量图形格式，直接嵌入 HTML 中使用。

基本 SVG

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#1890ff" stroke="#333" stroke-width="2" />
</svg>

SVG 可直接写在 HTML 中，无需 JavaScript。

常用形状

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 圆形 -->
  <circle cx="50" cy="50" r="40" fill="#1890ff" />

  <!-- 矩形 -->
  <rect x="120" y="10" width="80" height="80" fill="#52c41a" rx="10" />

  <!-- 椭圆 -->
  <ellipse cx="250" cy="50" rx="60" ry="30" fill="#faad14" />

  <!-- 直线 -->
  <line x1="330" y1="10" x2="390" y2="90" stroke="#ff4d4f" stroke-width="3" />

  <!-- 折线 -->
  <polyline points="20,120 60,100 100,130 140,110 180,140"
    fill="none" stroke="#1890ff" stroke-width="2" />

  <!-- 多边形 -->
  <polygon points="220,140 260,100 300,140 280,180 240,180"
    fill="#722ed1" opacity="0.7" />
</svg>

<path> 路径

SVG 路径用路径命令绘制复杂形状：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- M = moveTo, L = lineTo, C = cubic bezier, Z = close -->
  <path d="M 10 100 L 50 50 L 90 100 L 130 50 L 170 100"
    fill="none" stroke="#1890ff" stroke-width="3" />

  <!-- 贝塞尔曲线 -->
  <path d="M 10 180 Q 100 120 190 180"
    fill="none" stroke="#ff4d4f" stroke-width="3" />
</svg>

命令	含义	示例
M x y	移动到 (x, y)	M 10 20
L x y	画直线到 (x, y)	L 100 200
H x	水平线	H 200
V y	垂直线	V 100
Q cx cy x y	二次贝塞尔曲线	Q 50 100 100 150
C cx1 cy1 cx2 cy2 x y	三次贝塞尔曲线	C 10 20 30 40 50 60
Z	闭合路径	Z

<text> 文字

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="50" font-size="24" fill="#1890ff">SVG 文字</text>
  <text x="20" y="80" font-size="18" fill="#333"
    font-family="sans-serif" text-anchor="middle">
    居中文字
  </text>
</svg>

viewBox

viewBox 定义 SVG 的逻辑坐标系，使图形自动适应容器大小：

<!-- viewBox="x y width height" -->
<!-- 逻辑区域 0 0 100 50，拉伸到实际 200x100 -->
<svg width="200" height="100" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="5" width="80" height="40" fill="#1890ff" />
</svg>

viewBox 让 SVG 具有响应式能力——调整 width / height 后图形自动缩放。

Canvas vs SVG 对比

对比	Canvas	SVG
类型	位图（像素）	矢量（数学描述）
缩放	放大失真	无限放大不失真
DOM	单元素	每个图形是 DOM 节点
事件	需计算坐标	支持事件绑定
性能	大量元素时更快	少量元素时快
适用场景	游戏、实时动画、像素操作	图标、图表、静态插画

选择原则：

小结

SVG 标签	用途
<circle> / <rect> / <ellipse>	基本形状
<line> / <polyline> / <polygon>	线、折线、多边形
<path>	复杂路径
<text>	文字
viewBox	逻辑坐标系（响应式）
Canvas 适合	动画、游戏、像素处理
SVG 适合	图标、Logo、图表、静态图形

上一节：Canvas 动画与图像处理 下一节：Web Storage

贡献者: 布欧-Lewyon