SVG学习笔记

摘要

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.

一、基础概念

1. 全称：可缩放矢量图形（Scalable Vector Graphics）

2. 核心特性：矢量图，基于数学公式绘制图形，区别于像素位图；缩放、放大、旋转不会出现模糊锯齿；纯文本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 ：图形内部填充颜色， fill="none" 为无填充。

2. stroke ：边框颜色， stroke-width ：边框宽度。

3. opacity ：整体透明度，支持0-1数值调节。

五、拓展能力

1. 支持CSS样式修饰、hover交互效果。

2. 原生支持简单动画`标签可实现位移、缩放、变色动画。

3. 支持图形分组 <g> ，统一管理多个图形样式和变换。