一、SVG 核心概述
1. 什么是 SVG？
SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 语法的二维矢量图形格式，它不像 PNG、JPG 等位图那样由像素点构成，而是通过定义图形的形状、路径、颜色等数学描述来呈现图像。
2. SVG 核心优势（矢量图形的核心特性）
- 无限缩放不失真：无论放大多少倍（比如适配手机、平板、大屏显示器），都能保持边缘清晰、细节完整，无锯齿和模糊感。
- 体积小巧：对于简单图形，SVG 文件仅包含少量 XML 代码，文件体积远小于同等效果的位图；复杂图形通过优化后也能保持较高的压缩效率。
- 可编辑性强：既可以用专业工具（Adobe Illustrator、Figma、Inkscape）可视化编辑，也可以直接用文本编辑器修改 XML 代码，还能通过 CSS、JavaScript 动态操控。
- 良好的兼容性：支持所有现代浏览器，无需额外插件即可渲染，同时兼容移动端、小程序等多端场景。
- 语义化且可访问：作为 XML 格式，其标签具有语义化，可被搜索引擎抓取，也能被屏幕阅读器识别，提升网页可访问性。
二、SVG 基础语法与代码演示
SVG 可以直接嵌入 HTML 中使用（推荐，便于操控），也可以作为独立.svg文件引入（<img>、background-image等方式），下面是核心语法和可运行的代码示例。
1. 基础结构（最小可运行 SVG）
SVG 有固定的根标签<svg>，需要指定宽高（width、height），可选viewBox属性（定义可视区域，实现自适应缩放的核心）。
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>SVG 基础演示</title><style>/* 可通过 CSS 美化 SVG 元素 */svg{border:1px solid #eee;margin:20px;}</style></head><body><!-- 基础 SVG 容器：宽300px，高200px --><svgwidth="300"height="200"xmlns="http://www.w3.org/2000/svg"><!-- 注释：xmlns 是 SVG 命名空间，必须指定以确保浏览器正确解析 --></svg></body></html>2. 基本形状绘制（常用标签）
SVG 内置了多种基础形状标签，无需手动绘制路径，直接调用即可，以下是最常用的形状演示：
<svgwidth="400"height="300"xmlns="http://www.w3.org/2000/svg"><!-- 1. 矩形 <rect>：x/y（左上角坐标）、width/height（宽高）、rx/ry（圆角）、fill（填充色）、stroke（边框色）、stroke-width（边框宽度） --><rectx="20"y="20"width="100"height="80"rx="10"ry="10"fill="#42b983"stroke="#2c3e50"stroke-width="2"/><!-- 2. 圆形 <circle>：cx/cy（圆心坐标）、r（半径） --><circlecx="180"cy="60"r="40"fill="#3498db"stroke="#2c3e50"stroke-width="2"/><!-- 3. 椭圆形 <ellipse>：cx/cy（中心坐标）、rx（水平半径）、ry（垂直半径） --><ellipsecx="300"cy="60"rx="60"ry="40"fill="#e74c3c"stroke="#2c3e50"stroke-width="2"/><!-- 4. 线段 <line>：x1/y1（起点坐标）、x2/y2（终点坐标） --><linex1="20"y1="150"x2="380"y2="150"stroke="#2c3e50"stroke-width="2"stroke-dasharray="5,5"/><!-- stroke-dasharray：虚线样式 --><!-- 5. 多边形 <polygon>：points（顶点坐标集合，按顺序连接，自动闭合） --><polygonpoints="100,200 150,120 200,200"fill="#f1c40f"stroke="#2c3e50"stroke-width="2"/><!-- 6. 折线 <polyline>：points（顶点坐标集合，不自动闭合） --><polylinepoints="250,200 280,150 310,200 340,150 370,200"stroke="#9b59b6"stroke-width="2"fill="none"/></svg>3. 高级特性演示（路径、文本、渐变、交互）
（1）路径<path>：绘制复杂图形（核心标签）
<path>通过d属性定义绘制指令，是 SVG 中最强大的标签，可绘制任意复杂图形，常用指令：
M：移动到（Move to），指定起点，格式M x yL：画线到（Line to），格式L x yC：贝塞尔曲线（Cubic Bezier），实现平滑曲线Z：闭合路径（Close），连接终点和起点
<svgwidth="300"height="200"xmlns="http://www.w3.org/2000/svg"><!-- 绘制一个心形（复杂路径） --><pathd="M150,30 C180,0 220,20 250,50 C300,100 250,160 150,200 C50,160 0,100 50,50 C80,20 120,0 150,30 Z"fill="#e74c3c"stroke="#c0392b"stroke-width="2"/></svg>（2）文本<text>：添加可编辑文本
<svgwidth="300"height="100"xmlns="http://www.w3.org/2000/svg"><!-- 基础文本 --><textx="50"y="50"font-size="24"fill="#2c3e50">Hello SVG!</text><!-- 沿路径排列的文本（高级用法） --><pathid="textPath"d="M20,80 C80,20 220,20 280,80"fill="none"stroke="#eee"/><textfont-size="16"fill="#42b983"><textPathhref="#textPath">这是沿曲线排列的 SVG 文本</textPath></text></svg>（3）渐变效果：线性渐变<linearGradient>、径向渐变<radialGradient>
渐变需要定义在<defs>标签（SVG 定义区，存放可复用元素）中，通过id引用。
<svgwidth="300"height="200"xmlns="http://www.w3.org/2000/svg"><!-- 定义区：存放渐变、滤镜等可复用元素 --><defs><!-- 线性渐变：x1/y1（渐变起点）、x2/y2（渐变终点） --><linearGradientid="linearGrad"x1="0%"y1="0%"x2="100%"y2="100%"><stopoffset="0%"stop-color="#42b983"/><!-- 渐变起点 --><stopoffset="100%"stop-color="#3498db"/><!-- 渐变终点 --></linearGradient><!-- 径向渐变：cx/cy（渐变中心）、r（渐变半径） --><radialGradientid="radialGrad"cx="50%"cy="50%"r="50%"fx="50%"fy="50%"><stopoffset="0%"stop-color="#f1c40f"/><stopoffset="100%"stop-color="#e74c3c"/></radialGradient></defs><!-- 引用线性渐变 --><rectx="20"y="20"width="120"height="160"fill="url(#linearGrad)"/><!-- 引用径向渐变 --><circlecx="220"cy="100"r="80"fill="url(#radialGrad)"/></svg>（4）JavaScript 交互：动态操控 SVG
SVG 元素可以被 JavaScript 直接选中和修改，实现动态效果：
<svgwidth="300"height="200"xmlns="http://www.w3.org/2000/svg"><circleid="interactiveCircle"cx="150"cy="100"r="50"fill="#3498db"stroke="#2c3e50"stroke-width="2"/></svg><script>// 选中 SVG 圆形元素constcircle=document.getElementById('interactiveCircle');// 鼠标移入：改变颜色和半径circle.addEventListener('mouseover',()=>{circle.setAttribute('fill','#e74c3c');circle.setAttribute('r','60');});// 鼠标移出：恢复原始状态circle.addEventListener('mouseout',()=>{circle.setAttribute('fill','#3498db');circle.setAttribute('r','50');});</script>三、SVG 的常见应用场景
SVG 凭借其矢量特性和可操控性，在前端开发、可视化等领域有着广泛应用，核心场景如下：
1. 图标系统（最主流应用）
这是 SVG 最常用的场景，替代传统的 PNG 图标、Icon Font 字体图标，优势显著：
- 支持任意缩放，适配不同分辨率设备（移动端、大屏）。
- 可通过 CSS 修改颜色、大小、边框等样式，无需更换图片。
- 支持多色图标，解决 Icon Font 单色调的限制。
- 可通过
<symbol>+<use>实现图标雪碧图，减少网络请求。
实际案例：
- 网页中的功能图标（返回、搜索、设置）。
- 小程序、App 中的底部导航图标、按钮图标。
- 开源图标库：Font Awesome（支持 SVG 格式）、IconPark、Ant Design Icons。
2. 数据可视化图表
各类统计图表、数据大屏几乎都基于 SVG 实现（或结合 Canvas），因为：
- 图表中的坐标轴、折线、柱状图、饼图等都是矢量图形，需要支持缩放不失真。
- 可通过 JavaScript 动态修改 SVG 元素属性，实现图表的交互效果（悬浮高亮、数据更新、动画过渡）。
实际案例：
- 开源可视化库：ECharts、D3.js（核心基于 SVG）、Highcharts。
- 企业后台的销售数据报表、用户画像图表。
- 政府、金融行业的数据大屏可视化系统。
3. 网页插画与装饰元素
网页中的静态插画、背景装饰、动效元素越来越多使用 SVG 实现：
- 体积小巧，不影响网页加载速度。
- 可与网页布局无缝融合，支持响应式缩放。
- 可通过 CSS 或 SVG 动画实现简单的动效（如飘雪、旋转、渐变过渡）。
实际案例：
- 网页 404 页面、登录页面的装饰插画。
- 网页背景的几何图形、纹理图案。
- 按钮、卡片的hover动效装饰。
4. 矢量地图开发
在地理信息系统、区域数据展示中，SVG 是地图开发的重要选择：
- 地图的区域边界（国家、省份、城市）可通过 SVG 路径
<path>精准绘制。 - 支持动态高亮选中区域、添加标注点、展示区域数据。
- 可与地图引擎结合，实现交互性强的矢量地图。
实际案例：
- 全国各省份GDP数据地图。
- 城市交通路线图、景区导览图。
- 电商平台的区域配送范围展示。
5. 打印与高清输出场景
由于 SVG 无限缩放不失真的特性，非常适合需要高清打印或大屏输出的场景：
- 海报、宣传单的矢量设计稿（导出 SVG 格式，打印时可任意放大而不模糊）。
- 大屏投影、展会屏幕的展示内容（如企业宣传图、数据报表）。
- 印刷行业的商标、LOGO 设计（SVG 格式可直接对接印刷设备，保证清晰度）。
6. 动画与交互作品
SVG 支持原生动画（<animate>标签）、CSS 动画和 JavaScript 动画，可实现复杂的交互作品：
- 网页开启动画、加载动效。
- 交互式信息图、科普动画。
- 轻量级的小游戏、交互演示作品。
四、总结
- SVG 是基于 XML 的矢量图形格式，核心优势是无限缩放不失真、体积小巧、可编辑、可交互。
- 基础使用可通过
<rect>、<circle>等内置形状，复杂图形依赖<path>标签，高级特性支持渐变、文本、动画。 - 最主流的应用场景是图标系统和数据可视化，此外在插画、地图、打印等场景也有广泛应用。
- SVG 可直接嵌入 HTML 中使用，也可作为独立文件引入，结合 CSS 和 JavaScript 能实现强大的动态效果。
- 博客园
- 公众号
行走之飞鱼
