SVG是基于XML的矢量图形描述语言，通过文本指令定义图形，如用、等标签绘制形状，支持无限缩放、CSS样式控制和JavaScript动态操作；其坐标系原点在左上角，x向右、y向下增长，可通过viewBox实现响应式布局，可嵌入HTML或独立使用，具备良好交互性与可编程性。
SVG（Scalable Vector Graphics）是一种基于XML的开放标准，专门用来描述二维矢量图形。它不是一张“画好的图”，而是一套用文本写出来的绘图指令——比如“画一个圆，圆心在(100,100)，半径20，填充红色”，浏览器读到这段文字，就实时渲染出图形。正因为是文本+规则，SVG图形可以无限缩放而不模糊，也方便用JavaScript动态修改、用CSS控制样式。
SVG用XML语法定义图形元素
每个SVG图形由一组XML标签构成，根元素是，内部嵌套各种图形标签，如
-
：表示一个圆心在(50,50)、半径20、蓝色填充的圆 -
：绘制一个带黑边、无填充的矩形 -
：用路径指令画一个绿色三角形
SVG是真正的XML文档，可嵌入、可解析、可交互
一份SVG文件本身就是一个合法的XML文档，可以独立保存为.svg文件，也可以直接写在HTML里（作为内联代码），还能被JavaScript当作DOM节点操作。
- 把SVG代码粘贴进HTML的中，浏览器会立即渲染
- 用document.querySelector('circle')选中图形，再改.setAttribute('r', '30')就能放大圆
- 给
加onclick事件，点击就能触发动作
坐标系和单位是理解SVG绘图的关键
SVG默认使用像素单位，原点(0,0)在左上角，x向右增大，y向下增大——这点和数学坐标系不同，但和网页布局一致。你可以用viewBox属性重新定义坐标系统，实现响应式缩放。
- ：画布显示区域是200×100像素，坐标范围也是0–200横向、0–100纵向
- ：图形按比例缩放填满容器，且坐标被标准化为0–100，便于设计复用
基本上就这些。SVG不是图片格式，而是绘图语言；它用XML写，靠浏览器执行，所以清晰、可控、可编程。不复杂但容易忽略的是：它既可静态使用，也能深度集成到现代前端工作流中。
