SVG 基础入门

SVG 是前端开发中不可或缺的图形技术。无论是图标、图表还是动画效果，SVG 都能胜任。这个系列教程会带你从零开始，逐步掌握 SVG 的各项技能。

你会学到什么

这个教程系列覆盖了 SVG 的方方面面：

基础部分

SVG 是什么，和 Canvas 有什么区别
浏览器兼容性处理
第一个 SVG 程序

坐标系统

视口与画布的关系
viewBox 属性详解
preserveAspectRatio 对齐方式
坐标变换基础

绑制图形

矩形、圆形、椭圆、直线
折线、多边形
路径（最强大的绘图工具）

样式与效果

填充与描边
渐变（线性、径向）
图案填充
滤镜效果

进阶内容

文本绘制
变换操作
裁剪与遮罩
SMIL 动画
CSS 动画与 JavaScript 操作

实战应用

图标系统设计
数据可视化
性能优化技巧

学习建议

边看边练：每个案例都动手敲一遍，光看不练记不住
理解原理：viewBox、坐标系统这些概念要吃透，后面会反复用到
多做项目：学完基础后，尝试做几个小项目巩固知识

目录结构

SVG 图形教程
├── 第一部分：SVG 基础入门
│   ├── 什么是 SVG
│   ├── SVG 的优势与应用场景
│   ├── SVG 与 Canvas 对比
│   ├── 浏览器支持与兼容性
│   └── 第一个 SVG 程序
├── 第二部分：SVG 坐标系统
│   ├── 视口与画布
│   ├── viewBox 属性
│   ├── preserveAspectRatio
│   └── 坐标变换
├── 第三部分：绑制基本形状
│   ├── 绘制矩形 rect
│   ├── 绘制圆形 circle
│   ├── 绘制椭圆 ellipse
│   ├── 绘制直线 line
│   ├── 绘制折线 polyline
│   ├── 绘制多边形 polygon
│   └── 绘制路径 path
├── 第四部分：路径详解
│   ├── 路径基础
│   ├── M/m 移动命令
│   ├── L/l 线段命令
│   ├── H/h 和 V/v 水平垂直线
│   ├── C/c 三次贝塞尔曲线
│   ├── S/s 平滑三次贝塞尔曲线
│   ├── Q/q 二次贝塞尔曲线
│   ├── T/t 平滑二次贝塞尔曲线
│   ├── A/a 弧线命令
│   └── Z/z 闭合路径
├── 第五部分：填充与描边
├── 第六部分：渐变与图案
├── 第七部分：文本
├── 第八部分：变换
├── 第九部分：裁剪与遮罩
├── 第十部分：滤镜效果
├── 第十一部分：动画
├── 第十二部分：交互
├── 第十三部分：JavaScript 操作 SVG
├── 第十四部分：高级应用
├── 第十五部分：性能优化
├── 第十六部分：SVG 工具与库
└── 附录

准备好了吗？让我们从第一课开始，了解 SVG 到底是什么。

下一章：什么是 SVG