SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它允许开发者使用代码来创建和操作图形。与位图图像（如JPEG或PNG）不同，SVG图形可以无限缩放而不失真，这使得它们非常适合用于网页设计、图标、动画和数据可视化。本教程将从零开始，带你逐步掌握SVG的基本概念、语法和绘制技巧。
1. SVG基础概念
1.1 什么是SVG？
SVG是一种开放标准的矢量图形格式，由W3C（万维网联盟）制定。它使用XML来描述二维图形，包括形状、路径、文本和图像。SVG图形可以直接嵌入HTML文档中，也可以作为独立文件使用。
1.2 SVG的优势
可缩放性
：SVG图形在任何分辨率下都能保持清晰，不会出现像素化。
轻量级
：对于简单图形，SVG文件通常比位图文件小。
可编程性
：SVG可以通过JavaScript进行动态操作和交互。
可访问性
：SVG图形可以被屏幕阅读器读取，提高无障碍访问性。
2. SVG基本语法
2.1 SVG文档结构
一个基本的SVG文档包含一个

width
和
height
：定义SVG画布的尺寸。
xmlns
：命名空间，必须包含。

：圆形元素，
cx
和
cy
是圆心坐标，
r
是半径，
fill
是填充颜色。
2.2 基本形状元素
SVG提供了多种基本形状元素：

：矩形

：圆形

：椭圆 ：直线 ：折线 ：多边形 ：路径（最灵活，可以绘制任何形状）
3. 绘制基本形状
3.1 矩形
矩形元素

用于绘制矩形或正方形。属性包括：
x
和
y
：左上角坐标
width
和
height
：宽度和高度
rx
和
ry
：圆角半径（可选）
示例：

3.2 圆形和椭圆
圆形

和椭圆

的绘制方式类似，但椭圆需要分别指定x和y方向的半径。
示例：

3.3 直线和折线
直线 需要两个端点坐标，折线 需要一系列点坐标。
示例：

3.4 多边形
多边形 与折线类似，但会自动闭合路径。
示例：

4. 路径（Path）详解
4.1 路径基础
路径 是SVG中最强大的元素，可以绘制任何复杂形状。它使用一系列命令来定义路径。
基本语法： d
：路径数据，包含一系列命令和坐标。
stroke
：描边颜色。
fill
：填充颜色。
4.2 常用路径命令
M
或
m
：移动到（Move to） – 绝对/相对坐标
L
或
l
：直线到（Line to） – 绝对/相对坐标
H
或
h
：水平线到（Horizontal line to）
V
或
v
：垂直线到（Vertical line to）
C
或
c
：三次贝塞尔曲线（Cubic Bézier curve）
Q
或
q
：二次贝塞尔曲线（Quadratic Bézier curve）
A
或
a
：椭圆弧（Arc）
Z
或
z
：闭合路径（Close path）
4.3 路径示例

5. SVG样式和属性
5.1 颜色和填充
SVG支持多种颜色表示方式：
颜色名称：
red
,
blue
,
green
十六进制：
#FF0000
,
#00FF00
RGB：
rgb(255,0,0)
RGBA：
rgba(255,0,0,0.5)
（半透明）
5.2 描边属性
stroke
：描边颜色
stroke-width
：描边宽度
stroke-linecap
：线端样式（
butt
,
round
,
square
）
stroke-linejoin
：线连接样式（
miter
,
round
,
bevel
）
stroke-dasharray
：虚线模式
示例：

5.3 渐变
SVG支持线性渐变和径向渐变。
线性渐变示例：

径向渐变示例：

6. SVG文本
6.1 基本文本
SVG中的文本使用

元素，可以设置字体、大小、颜色等属性。
示例：

Bold Text

Text along a curve!
6.2 文本属性
font-family
：字体系列
font-size
：字体大小
font-weight
：字体粗细
font-style
：字体样式（italic, normal）
text-anchor
：文本对齐（start, middle, end）
dominant-baseline
：基线对齐（hanging, middle, central）
7. SVG变换和动画
7.1 变换
SVG支持平移、旋转、缩放和倾斜变换。
变换示例：

7.2 动画
SVG支持通过SMIL（Synchronized Multimedia Integration Language）或CSS/JavaScript实现动画。
SMIL动画示例：

CSS动画示例：

8. SVG与HTML集成
8.1 内联SVG
可以直接将SVG代码嵌入HTML文档中：

SVG示例

8.2 外部SVG文件
可以将SVG保存为
.svg
文件，然后通过

标签或