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