SVG全称为Scalable Vector Graphics，即可缩放矢量图形，是一种基于XML语法的二维矢量图形格式，它通过数学公式描述图形内容，因此无论放大到多大尺寸或者缩小到多小，都不会出现边缘模糊、像素失真的问题，和JPG、PNG这类位图格式有本质区别。
SVG的核心特点
SVG的核心优势主要体现在几个方面，首先是矢量特性带来的无损缩放能力，其次是文件体积通常较小，尤其是简单图形场景，比位图更节省带宽。另外SVG是文本格式，可以直接嵌入到HTML文档中，也可以通过CSS和JavaScript控制样式和交互行为，非常适合需要动态修改的图形场景。
SVG的XML基础结构
SVG的整个文档本身就是一个符合XML规范的节点，最外层是<svg>根标签，在这个标签内部可以定义各种图形元素、样式和交互逻辑。基础的SVG XML结构如下：
<?xml version="1.0" encoding="UTF-8"?> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <!-- 这里是具体的图形内容 --> </svg>
上面的代码中，<?xml>是XML的声明头，指定了版本和编码，<svg>标签的width和height属性定义了画布的宽高，xmlns属性指定了SVG的命名空间，这是标准SVG文档必须携带的属性。
用XML绘制常见SVG图形
绘制矩形
矩形使用<rect>标签定义，需要指定位置、宽高和样式属性，示例代码如下：
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="30" width="150" height="100" fill="#4CAF50" stroke="#333" stroke-width="2" /> </svg>
其中x和y是矩形左上角的坐标，width和height是矩形的宽高，fill是填充颜色，stroke是边框颜色，stroke-width是边框宽度。
绘制圆形
圆形使用<circle>标签定义，需要指定圆心坐标和半径，示例代码如下：
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="150" cy="100" r="60" fill="#2196F3" stroke="#333" stroke-width="2" /> </svg>
cx和cy是圆心的横纵坐标，r是圆的半径。
绘制直线
直线使用<line>标签定义，需要指定起点和终点的坐标，示例代码如下：
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <line x1="50" y1="50" x2="250" y2="150" stroke="#F44336" stroke-width="3" /> </svg>
x1和y1是起点的横纵坐标，x2和y2是终点的横纵坐标。
绘制路径
复杂图形可以使用<path>标签通过路径命令绘制，示例是绘制一个三角形：
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M 100 50 L 200 150 L 100 150 Z" fill="#FF9800" stroke="#333" stroke-width="2" /> </svg>
路径的d属性中，M是移动到指定坐标，L是绘制直线到指定坐标，Z是闭合路径。
SVG的样式定义方式
除了在图形标签上直接写样式属性，还可以通过<style>标签定义CSS样式，复用样式规则，示例代码如下：
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<style>
.shape { stroke: #333; stroke-width: 2; }
.green-fill { fill: #4CAF50; }
.blue-fill { fill: #2196F3; }
</style>
<rect x="50" y="30" width="80" height="60" class="shape green-fill" />
<circle cx="200" cy="60" r="30" class="shape blue-fill" />
</svg>
这种方式和HTML中写CSS的逻辑一致，方便管理多个图形的样式，也支持通过JavaScript动态修改class来改变图形外观。