矢量图是用几何图元（点、直线、曲线、多边形）和数学参数描述的图像，与按像素存储的位图相对。矢量图不依赖分辨率，缩放、旋转、平移时不会失真。

与位图的区别

特性矢量图位图 / 栅格图
存储内容几何命令与参数像素颜色矩阵
缩放无限缩放不失真放大后出现锯齿或模糊
文件大小图形简单时较小与分辨率相关
编辑方式修改路径与属性逐像素处理
适合场景图标、字体、LOGO、插画、CAD、UI照片、复杂纹理、扫描件

屏幕最终显示仍是像素，矢量图在显示前需要经过栅格化（rasterize）。

常见格式

  • SVG：面向 Web 的文本格式，可用 CSS 与 JavaScript 操作。
  • PDF：页面描述格式，内部包含矢量图形。
  • EPS / AI：印刷与设计软件常用。
  • CDR：CorelDRAW 格式。
  • EMF / WMF：Windows 图元文件。
  • 字体：TrueType / OpenType 的字形轮廓本身是矢量数据。

渲染原理

矢量图形引擎将几何对象应用坐标变换（缩放、旋转、平移），执行填充与描边，最后栅格化到目标分辨率。Web 中的 SVG 采用保留模式，DOM 中保留图形对象；Canvas 则是立即模式位图绘制。相关笔记：Canvas 绘图。

用途

  • UI 图标与品牌素材。
  • 字体渲染。
  • 地图、CAD 与科学图表。
  • 可缩放插画与动效。
  • 3D 线框与蓝图。

动画

SVG 可以用 CSS @keyframes 驱动几何变换，做出纯矢量动态插画。嵌套骨骼的复合旋转、以及 <use> 复用组件时的两个陷阱，另见：

与贝塞尔曲线

贝塞尔曲线是矢量图形中最常用的曲线表示方式，SVG path 与字体轮廓都建立在其上。相关笔记：贝塞尔曲线。

参考资料

本文归档于个人知识库 · 领域：CS & AI · 模块：04 Project_CS_AI/Frontend