想学 SVG 却不知道从哪开始？这篇文章用几个实际例子带你入门。不管你是做网页图标、数据可视化，还是简单的图形动画，SVG 都能派上用场。
把 SVG 代码直接写在 HTML 里，这是最简单的方式。看下面这个例子：
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第一个 SVG 程序</title>
</head>
<body>
<svg width="200" height="200">
<rect x="20" y="20" width="160" height="160" fill="#3498db" rx="10" ry="10"/>
<circle cx="100" cy="100" r="50" fill="#e74c3c"/>
<text x="100" y="105" text-anchor="middle" fill="white" font-size="14" font-weight="bold">SVG</text>
</svg>
</body>
</html>
代码里的几个关键点：
| 写法 | 含义 |
|---|---|
width="200" | 画布宽度 200 像素 |
rect x="20" y="20" | 矩形左上角在坐标 (20, 20) |
rx="10" ry="10" | 圆角半径 10 像素 |
circle cx="100" cy="100" | 圆心在 (100, 100) |
text-anchor="middle" | 文字水平居中 |
坐标原点在左上角，x 向右增大，y 向下增大。这个和 Canvas 是一样的。
SVG 文件可以保存成 .svg 后缀的独立文件，然后用 <img> 标签加载。这样做的好处是方便复用，多个页面都能引用同一个文件。
用 img 标签加载的 SVG
HTML 写法：
<img src="success.svg" alt="成功图标" width="100" height="100">
success.svg 文件内容：
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#2ecc71"/>
<path d="M30 50 L45 65 L70 35" stroke="white" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
注意几点：
xmlns="http://www.w3.org/2000/svg" 必须写，否则浏览器不认识<img> 加载时，SVG 内部的动画和交互会失效CSS 的 background-image 也能用 SVG。这种方式适合做装饰性图案，比如圆点背景、斜线背景等。
CSS 写法：
.pattern-box {
background-color: #3498db;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='2' fill='rgba(255,255,255,0.3)'/%3E%3C/svg%3E");
}
这里用了 Data URI 格式，把 SVG 代码编码后直接写在 URL 里。特殊字符要转义：
< 变成 %3C> 变成 %3E# 变成 %23也可以把 SVG 存成文件，然后用 url('pattern.svg') 引用。
一个完整的 SVG 文件长这样：
完整代码：
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#3498db"/>
<stop offset="100%" style="stop-color:#e74c3c"/>
</linearGradient>
</defs>
<desc>展示 SVG 基本结构</desc>
<title>SVG 结构示例</title>
<g id="shapes">
<rect x="20" y="20" width="80" height="60" fill="url(#myGradient)" rx="5"/>
<circle cx="160" cy="50" r="30" fill="#2ecc71"/>
<ellipse cx="250" cy="50" rx="40" ry="25" fill="#9b59b6"/>
<line x1="20" y1="120" x2="280" y2="120" stroke="#34495e" stroke-width="2"/>
<polygon points="100,180 130,140 160,180" fill="#f1c40f"/>
<polyline points="200,180 220,140 240,180 260,140 280,180" fill="none" stroke="#e67e22" stroke-width="2"/>
</g>
<text x="150" y="170" text-anchor="middle" font-size="12" fill="#333">SVG 基本图形元素</text>
</svg>
结构说明：
| 元素 | 作用 |
|---|---|
<svg> | 根元素，定义画布尺寸 |
<defs> | 存放可复用的定义，如渐变、滤镜 |
<desc> | 文档描述，提升无障碍访问性 |
<title> | 文档标题，屏幕阅读器会读出来 |
<g> | 分组元素，把多个图形打包在一起 |
viewBox 是 SVG 里最容易让人困惑的属性，但也是最强大的。它决定了 SVG 内容如何映射到画布上。
格式是 viewBox="min-x min-y width height"，四个值分别代表：视口左上角的 x 坐标、y 坐标、视口宽度、视口高度。
viewBox="0 0 100 100"
viewBox="0 0 50 50"（放大）
viewBox="0 0 200 200"（缩小）
viewBox="25 25 50 50"（偏移）
代码：
<div style="display: flex; gap: 20px;">
<!-- 正常显示 -->
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#3498db"/>
</svg>
<!-- viewBox 较小，内容放大 -->
<svg width="100" height="100" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="#e74c3c"/>
</svg>
<!-- viewBox 较大，内容缩小 -->
<svg width="100" height="100" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" fill="#2ecc71"/>
</svg>
<!-- viewBox 偏移，只显示部分区域 -->
<svg width="100" height="100" viewBox="25 25 50 50">
<circle cx="50" cy="50" r="40" fill="#9b59b6"/>
</svg>
</div>
怎么理解？把 viewBox 想象成一个"取景框"：
这个特性让 SVG 天生支持响应式。只要设置 width="100%"，配合合适的 viewBox，图形就能自动适应容器大小。
这篇文章介绍了 SVG 的几种使用方式：
<img> 加载，方便复用