- 001入门SVG 概述：图标放大三倍也不糊的秘密以「图标放大三倍不糊」引入，讲清 SVG 用文本描述矢量的本质、位图与矢量的放大对照实验、主战场与三种嵌入方式预告，零工具起步。
- 002入门SVG 文档结构：画布、命名空间与复用以「同一个圆要画十次」引入，讲透 svg 根元素与 xmlns、defs/use 复用、g 分组与继承、title 可访问性，附白屏与失真两类问题的排查实录。
- 003入门坐标系与 viewBox：一张取景框管住所有尺寸以「100x100 的画布怎么装进 48x48 的按钮」引入，讲透视口与 viewBox 的分工、preserveAspectRatio 的 meet/slice 对照、y 轴向下与数学坐标的差异，附图标失真的排查实录；进阶覆盖嵌套 svg、user unit 与 CSS 单位换算、transform 叠加顺序与 getBBox/getScreenCTM 调试。
- 004入门SVG 基本图形详解rect、circle、ellipse、line、polyline、polygon 六大基本图形属性与用法。
- 005中级SVG 路径 path 详解path 命令、贝塞尔曲线、弧线、相对坐标与复杂路径绘制技巧。
- 006中级SVG 文本与排版text、tspan、textPath、文字锚点、字体属性与可访问文本。
- 007中级SVG 颜色与填充fill、stroke、opacity、currentColor、paint-order 与矢量效果。
- 008中级SVG 渐变与图案linearGradient、radialGradient、pattern 平铺与复杂纹理。
- 009中级SVG 变换 transformtranslate、rotate、scale、skew、matrix 与 transform-origin 变换组合。
- 010进阶SVG 滤镜详解filter、feGaussianBlur、feDropShadow、feColorMatrix、滤镜组合与光照。
- 011进阶SVG 裁剪与蒙版clipPath 硬裁剪、mask 软蒙版、 luminance 与 alpha 蒙版技巧。
- 012入门端点标记 marker：路径的附属符号用 marker 给路径挂箭头、圆点与刻度，掌握 refX/refY、markerUnits、orient 四组旋钮与尺寸联动规则
- 013入门嵌入内容：image 与 foreignObject用 image 在 SVG 里引入位图、用 foreignObject 嵌入 HTML 富文本，以及两者在导出与外链场景下的可用边界
- 014中级SVG 符号与复用symbol、use、defs 复用机制与图标系统构建。
- 015入门SVG 嵌入与交付方式对比 inline、img、CSS background、object/iframe、symbol sprite、favicon 六种把 SVG 放进网页的方式，以及各自的 CSS/JS 可控性与资源加载限制
- 016中级SVG CSS 样式化内联样式、style 标签、外部 CSS、CSS 变量、伪类与媒体查询。
- 017进阶SVG 动画基础从「给页面加一个加载圈」出发：SMIL/animate/animateMotion、CSS 动画的 transform-box 坑、WAAPI 三条路线选型与性能铁律。
- 018进阶SVG JavaScript 交互DOM 操作、事件绑定、属性读写、动态生成与数据驱动可视化。
- 019入门SVG 数据可视化方法论：比例尺、坐标轴与数据驱动更新把数据映射成坐标的比例尺思想、坐标轴与网格线的标准结构、数据更新与过渡动画、图表无障碍的最小要求
- 020进阶SVG 性能优化性能瓶颈定位、节点与滤镜优化、懒加载、SVGO 压缩、缓存与渲染优化，以及何时切换到 Canvas。
- 021入门响应式 SVG：流式适配、容器查询与媒体特性让一份 SVG 在按钮、卡片与大屏之间自由伸缩——viewBox 流式范式、preserveAspectRatio 取值、流式内容切换、Container Queries 与媒体特性
- 022中级SVG 图标系统工程图标设计原则（统一画布、currentColor、像素网格）、sprite 实现与尺寸颜色变体、命名规范与构建链路。
- 023入门SVG 可访问性：ARIA、键盘导航与动效降级按「装饰、语义、交互」三类给 SVG 配齐无障碍属性——title/desc、role 与 ARIA 速查、focus 与键盘导航、prefers-reduced-motion 与颜色对比度
- 024进阶SVG 实战项目综合运用：仪表盘、环形进度、动画 Logo、数据可视化。