SVG 基础与实用技巧 - 从矢量基础到动画
什么是 SVG - 与位图的本质区别
SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图像格式，与 PNG、JPEG 等位图格式有本质区别。位图由像素网格组成，放大后会模糊；SVG 由数学公式描述的形状组成，在任何尺寸下都保持清晰锐利。
SVG 的核心优势:
- 无限缩放: 从图标到巨幅海报，任何尺寸都完美清晰
- 文件小: 简单图形的 SVG 通常比同等 PNG 小得多
- 可编辑: SVG 是文本文件，可以用代码编辑器直接修改
- 可动画: 通过 CSS 或 JavaScript 实现动画效果
- 可交互: 每个元素都可以响应鼠标事件
- SEO 友好: 文本内容可被搜索引擎索引
SVG 不适合的场景:
- 照片和复杂的自然图像 (应使用 JPEG/WebP)
- 包含大量细节的复杂插画 (文件可能比 PNG 更大)
- 需要像素级精确控制的位图效果
SVG 的典型用途:
- Logo 和品牌标识
- 图标系统
- 数据可视化图表
- UI 元素和装饰图形
- 地图和示意图
- 动画和交互式图形
SVG 基本结构 - 坐标系统与核心元素
SVG 文件的基本结构是一个 XML 文档，包含坐标系统定义和图形元素。理解这些基础概念是有效使用 SVG 的前提。
基本文档结构:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"> <circle cx="50" cy="50" r="40" fill="blue" /></svg>
viewBox 属性:
viewBox="min-x min-y width height" 定义了 SVG 的内部坐标系统。这是 SVG 缩放能力的关键 - 无论 SVG 元素的实际显示尺寸如何，内部坐标始终保持一致。
基本图形元素:
<rect>: 矩形。属性: x, y, width, height, rx (圆角)<circle>: 圆形。属性: cx, cy (圆心), r (半径)<ellipse>: 椭圆。属性: cx, cy, rx, ry<line>: 直线。属性: x1, y1, x2, y2<polyline>: 折线。属性: points<polygon>: 多边形。属性: points<path>: 路径 (最强大的元素)。属性: d (路径数据)
path 元素的 d 属性:
path 是 SVG 中最灵活的元素，可以绘制任何形状。路径命令包括: M (移动到)、L (直线到)、C (三次贝塞尔曲线)、Q (二次贝塞尔曲线)、A (弧线)、Z (闭合路径)。大写字母表示绝对坐标，小写表示相对坐标。
SVG 路径编写 - d 属性命令系统
SVG 的样式可以通过内联属性、内部样式表或外部 CSS 来控制。这种灵活性使 SVG 能够完美融入 Web 开发工作流程。
内联属性方式:
<rect fill="#3498db" stroke="#2c3e50" stroke-width="2" opacity="0.8" />
CSS 样式方式:
<style> .btn { fill: #3498db; transition: fill 0.3s; } .btn:hover { fill: #2980b9; } </style>
常用样式属性:
fill: 填充颜色 (支持颜色值、渐变、图案)stroke: 描边颜色stroke-width: 描边宽度stroke-dasharray: 虚线样式opacity: 整体透明度fill-opacity/stroke-opacity: 分别控制填充和描边透明度transform: 变换 (平移、旋转、缩放)
渐变:
SVG 支持线性渐变 (<linearGradient>) 和径向渐变 (<radialGradient>)。渐变定义在 <defs> 中，通过 url(#id) 引用。
CSS 动画:
SVG 元素可以使用标准 CSS 动画和过渡。常见效果包括: 描边动画 (stroke-dashoffset)、颜色过渡、变换动画。这使得 SVG 图标和 UI 元素可以拥有流畅的交互反馈。
CSS 和 JavaScript 操作 SVG - 动态样式与交互
在 Web 页面中使用 SVG 有多种方式，每种方式有不同的功能和限制。选择合适的嵌入方式取决于你需要的交互性和样式控制程度。
内联 SVG (推荐用于需要交互的场景):
直接将 SVG 代码嵌入 HTML 中。优点: 可以用 CSS 样式化、JavaScript 操作、支持动画和事件。缺点: 增加 HTML 文件大小，不能被浏览器缓存。
img 标签:
<img src="icon.svg" alt="图标" width="24" height="24">
最简单的方式。SVG 作为外部文件加载，可被浏览器缓存。但不能用 CSS 修改 SVG 内部样式，不支持交互。适合静态装饰性图像。
CSS background-image:
.icon { background-image: url("icon.svg"); }
适合装饰性图形。不能交互，不能用 CSS 修改内部样式。支持 background-size 控制尺寸。
object 标签:
<object type="image/svg+xml" data="chart.svg"></object>
SVG 保持独立文档，内部样式和脚本正常工作。可以通过 JavaScript 访问 SVG DOM。适合复杂的交互式 SVG (如图表)。
选择指南:
- 需要 CSS 样式化或 JS 交互 → 内联 SVG
- 静态图标/装饰 → img 标签 (可缓存)
- CSS 背景装饰 → background-image
- 复杂独立 SVG 应用 → object 标签
SVG 动画 - SMIL vs CSS Animation 的选择
SVG 文件优化可以显著减小文件大小，提升页面加载性能。未优化的 SVG (特别是从设计工具导出的) 通常包含大量冗余信息。
常见的冗余内容:
- 编辑器元数据 (Illustrator、Sketch 的私有属性)
- 未使用的定义 (defs 中未引用的渐变、滤镜)
- 过度精确的坐标 (小数点后 10 位以上)
- 空的组元素和无效属性
- 内联样式中的默认值
SVGO - 最流行的 SVG 优化工具:
npx svgo input.svg -o output.svg
SVGO 是 Node.js 生态中标准的 SVG 优化器。它通过一系列插件移除冗余内容、简化路径数据、合并属性。典型的优化效果是文件大小减少 30-60%。
SVGO 常用配置:
removeViewBox: false- 保留 viewBox (响应式缩放必需)removeDimensions: true- 移除固定宽高，让 SVG 响应式cleanupNumericValues: { floatPrecision: 2 }- 限制小数精度
手动优化技巧:
- 简化路径: 减少锚点数量，使用更简单的曲线
- 使用 symbol + use: 复用重复的图形元素
- 合并相同样式的路径
- 使用 CSS 类替代重复的内联样式
Gzip 压缩:
SVG 是文本格式，Gzip 压缩效果极好 (通常压缩 60-80%)。确保服务器对 SVG 文件启用 Gzip 或 Brotli 压缩。压缩后的 SVG 通常比同等 PNG 小得多。
SVG 优化与性能 - 实用注意事项
SVG 在现代 Web 开发中有许多高级应用，超越了简单的静态图形展示。
SVG 图标系统:
使用 SVG sprite (symbol + use) 构建图标系统是当前的最佳实践。将所有图标定义在一个 SVG 文件中，通过 <use href="#icon-name"> 引用。优点: 单次 HTTP 请求、CSS 可样式化、缓存友好。
SVG 动画:
- CSS 动画: 适合简单的过渡和循环动画 (旋转、淡入淡出、描边动画)
- SMIL 动画: SVG 原生动画语法，无需 JavaScript。浏览器支持良好但 Chrome 曾计划弃用后又保留
- JavaScript 动画库: GreenSock (GSAP)、Anime.js 等提供强大的时间线控制和复杂动画编排
数据可视化:
D3.js 等库使用 SVG 作为渲染引擎创建交互式图表。SVG 的 DOM 结构使每个数据点都可以独立交互 (悬停提示、点击钻取)。对于数据点较少 (< 1000) 的图表，SVG 是理想选择。
SVG 滤镜:
SVG 滤镜 (<filter>) 提供了强大的图像处理能力: 模糊、阴影、色彩矩阵变换、形态学操作等。这些滤镜也可以通过 CSS filter: url(#filter-id) 应用到 HTML 元素上。
无障碍性:
SVG 支持 <title> 和 <desc> 元素为图形提供文本描述，配合 role="img" 和 aria-labelledby 属性确保屏幕阅读器正确解读。对于装饰性 SVG，使用 aria-hidden="true" 避免干扰。