34. SVG 矢量图入门

前面学的 JPEG、PNG、WebP 都是位图——由一个个像素点组成。放大后会模糊。SVG 不一样，它是矢量图，放大永远不会失真。

位图 vs 矢量图

想象一下照片和数学公式的区别：

• 位图（JPEG/PNG）：记录每个像素的颜色。放大后，像素被拉伸，画面变模糊
• 矢量图（SVG）：记录”画一个圆心在 (100,100)、半径 50 的圆”。放大后重新计算，永远清晰

位图：●●●●●    → 放大后：■■■■■■■    （锯齿）
      ●●●●●              ■■■■■■■
      ●●●●●              ■■■■■■■

矢量：circle(100,100,r50) → 放大后：circle(200,200,r100)  （平滑）

三种使用方式

方式一：作为图片引用

SVG 可以像普通图片一样用在 <img> 里：

<img src="logo.svg" alt="公司 Logo" width="200" height="200" />

优点：简单。缺点：不能用 CSS 控制 SVG 内部样式，也不能用 JavaScript 操作。

方式二：内联 SVG

直接把 SVG 代码写在 HTML 里：

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" fill="blue" />
  <text x="100" y="110" text-anchor="middle" fill="white" font-size="24">
    码上学
  </text>
</svg>

优点：可以用 CSS 和 JavaScript 操作 SVG 内部元素。缺点：HTML 文件变大。

方式三：作为 CSS 背景

.logo {
  background-image: url("logo.svg");
  width: 200px;
  height: 200px;
}

基础形状标签

SVG 内置了一些简单的形状标签。

矩形 rect

<svg width="300" height="200">
  <rect x="10" y="10" width="100" height="80" fill="green" />
</svg>

x 和 y 是左上角坐标，width 和 height 是尺寸。

圆形 circle

<circle cx="100" cy="100" r="50" fill="red" />

cx 和 cy 是圆心坐标，r 是半径。

椭圆 ellipse

<ellipse cx="100" cy="100" rx="80" ry="40" fill="orange" />

rx 是 x 轴半径，ry 是 y 轴半径。

直线 line

<line x1="10" y1="10" x2="200" y2="100" stroke="black" stroke-width="2" />

(x1, y1) 是起点，(x2, y2) 是终点。stroke 是线条颜色。

文本 text

<text x="100" y="50" text-anchor="middle" font-size="20">Hello SVG</text>

text-anchor="middle" 让文字水平居中对齐到 x 坐标。

SVG 的坐标系

SVG 的坐标原点在左上角。x 轴向右，y 轴向下。

(0,0) ─────────→ x
  │
  │
  │
  ↓
  y

这和数学里的坐标系不一样（y 轴向上），别搞混了。

viewBox 属性

viewBox 定义了 SVG 的可见区域。格式是 "x y width height"。

<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

viewBox="0 0 100 100" 意思是：SVG 内部的坐标系是 100x100。但实际显示尺寸是 200x200。SVG 会自动缩放，让 100 个单位的图形填满 200 像素的空间。

这就是 SVG 矢量的精髓——改 width 和 height 就能任意缩放，不影响清晰度。

用 SVG 做图标

实际开发中，SVG 最常见的是做图标系统：

<!-- 搜索图标 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <circle cx="11" cy="11" r="8" />
  <line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>

stroke="currentColor" 让 SVG 继承父元素的文字颜色。你设 color: red，图标就变红。

什么时候用 SVG

场景	推荐
照片	JPEG / WebP
Logo、图标	SVG
简单图形、图表	SVG
需要动画的图形	SVG（配合 CSS/JS）
需要缩放到任意尺寸	SVG

浏览器兼容性

所有现代浏览器都原生支持 SVG。不需要任何 polyfill。

下一节学习 <picture> 和 srcset——让浏览器自动选择最合适的图片版本。