摘要
SVG是可缩放矢量图形，是用于描述二维矢量图形的XML格式文件，可直接嵌入网页，支持无限缩放不失真，文件体积小，适配网页图标、简单图形、动画等场景，无需依赖位图像素，兼容性强，可通过代码编辑图形样式与动画。
abstract
SVG (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.
一、基础概念
-
全称：可缩放矢量图形（Scalable Vector Graphics）
-
核心特性：矢量图，基于数学公式绘制图形，区别于像素位图；缩放、放大、旋转不会出现模糊锯齿；纯文本XML结构，可读写、可压缩。
-
适用场景：网页图标、logo、简单几何图形、数据可视化图表、轻量网页动画；不适合复杂照片、高清实景图片。
二、基础语法规则
-
文件后缀为 .svg ，`。
-
支持设置宽高 width/height 、视口 viewBox （定义图形可视区域，实现自适应缩放）。
-
遵循XML规范：标签必须闭合、属性带引号、区分大小写。
-
可直接嵌入HTML页面，也可单独作为文件引入。
三、常用基础图形标签
-
矩形：`，可设置宽高、圆角、填充色、边框。
-
圆形： <circle> ，通过圆心坐标、半径绘制。
-
椭圆： <ellipse> ，区分横竖半径。
-
**`，通过两点坐标绘制直线段。
-
折线/多边形： <polyline> 折线、 <polygon> 闭合多边形，通过点位坐标绘制。
-
路径：`，SVG最强大标签，可绘制任意不规则图形、曲线，通过路径指令控制。
四、基础样式属性
-
fill ：图形内部填充颜色， fill="none" 为无填充。
-
stroke ：边框颜色， stroke-width ：边框宽度。
-
opacity ：整体透明度，支持0-1数值调节。
五、拓展能力
-
支持CSS样式修饰、hover交互效果。
-
原生支持简单动画`标签可实现位移、缩放、变色动画。
-
支持图形分组 <g> ，统一管理多个图形样式和变换。