在前端开发中，当你需要生成、操作或动画化 SVG 矢量图时，很多人会直接写原生 SVG 标签或者用 Canvas。然而，直接操作 SVG 的 XML 结构不仅繁琐，还容易出错。
这时候，SVG.js 就是一个轻量且强大的帮手。
什么是 SVG.js？
SVG.js 是一个专门用于操作 SVG 的 JavaScript 库，目标是让 SVG 的创建、变换、动画、交互变得更简单、直观。
它最大的特点是：
✅ API 简洁、链式调用友好
✅ 文件体积小（压缩后不到 20KB）
✅ 拓展性强，有丰富的插件体系
✅ 不需要依赖第三方框架，纯原生 JavaScript
核心功能
下面列举一些 SVG.js 的核心能力，让你快速感受一下：
1. 快速创建 SVG 元素
import { SVG } from "@svgdotjs/svg.js";
const draw = SVG().addTo("body").size(300, 300);
const rect = draw.rect(100, 100).attr({ fill: "#f06" });
2. 链式操作
rect.move(50, 50).fill("#0f9").stroke({ width: 2, color: "#000" });
3. 内置动画
rect.animate(1000).move(150, 150).fill("#f03");
4. 事件监听
rect.on("click", () => {
alert("Rectangle clicked!");
});
5. 插件生态
想做滤镜、路径运算、拖拽？SVG.js 有丰富的插件如 svg.draggable.js、svg.filter.js，只需要按需引入即可。
和其他图形库有什么区别？
| 库名 | 优势 | 适用场景 |
|---|---|---|
| SVG.js | 轻量、专注于 SVG 操作，链式 API 简洁 | 动态生成或动画化 SVG 图形 |
| Snap.svg | 功能齐全，但更新不活跃 | 需要兼容老项目 |
| D3.js | 强大的数据驱动文档，可视化能力极强 | 数据可视化图表，复杂交互 |
| Paper.js | 专注 Canvas 的矢量图形，适合创作自由绘制 | 需要自由绘图或生成复杂插画时 |
如果你只想在网页里快速生成可交互的矢量图，SVG.js 是很好的选择。
如何快速上手？
SVG.js 有多种引入方式：
- CDN：
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js"></script>
- npm：
npm install @svgdotjs/svg.js
总结
SVG.js 不仅让你告别繁琐的手写 SVG 标签，还能用现代化的链式 API 快速实现复杂的动画和交互。如果你有在做图形化编辑器、流程图、可视化小组件等项目，不妨尝试用 SVG.js 来简化开发。