摘要SVG是可缩放矢量图形是用于描述二维矢量图形的XML格式文件可直接嵌入网页支持无限缩放不失真文件体积小适配网页图标、简单图形、动画等场景无需依赖位图像素兼容性强可通过代码编辑图形样式与动画。abstractSVG (Scalable Vector Graphics) is an XML-based file format for describing two-dimensional vector graphics. It can be embedded directly in web pages, supports infinite scaling without distortion, and has a small file size. It is suitable for web icons, simple graphics and animations, with strong compatibility, and its styles and animations can be edited through code.一、基础概念1. 全称可缩放矢量图形Scalable Vector Graphics2. 核心特性矢量图基于数学公式绘制图形区别于像素位图缩放、放大、旋转不会出现模糊锯齿纯文本XML结构可读写、可压缩。3. 适用场景网页图标、logo、简单几何图形、数据可视化图表、轻量网页动画不适合复杂照片、高清实景图片。二、基础语法规则1. 文件后缀为 .svg 。2. 支持设置宽高 width/height 、视口 viewBox 定义图形可视区域实现自适应缩放。3. 遵循XML规范标签必须闭合、属性带引号、区分大小写。4. 可直接嵌入HTML页面也可单独作为文件引入。三、常用基础图形标签1. 矩形可设置宽高、圆角、填充色、边框。2. 圆形 circle 通过圆心坐标、半径绘制。3. 椭圆 ellipse 区分横竖半径。4. **通过两点坐标绘制直线段。5. 折线/多边形 polyline 折线、 polygon 闭合多边形通过点位坐标绘制。6. 路径SVG最强大标签可绘制任意不规则图形、曲线通过路径指令控制。四、基础样式属性1. fill 图形内部填充颜色 fillnone 为无填充。2. stroke 边框颜色 stroke-width 边框宽度。3. opacity 整体透明度支持0-1数值调节。五、拓展能力1. 支持CSS样式修饰、hover交互效果。2. 原生支持简单动画标签可实现位移、缩放、变色动画。3. 支持图形分组 g 统一管理多个图形样式和变换。