Glossary
图标术语词典
40 个图标与矢量设计领域的高频术语，中英对照 + 通俗解释。排版规范、文件格式、工程实现一网打尽，遇到陌生名词 Ctrl+F 即查。
基础概念9 条
- 像素Pixel
- 位图的最小显示单元。图标设计中常用 16/24/32/48px 等标准栅格，保证小尺寸下的清晰度与对齐。
- 字形 / 图形符号Glyph
- 字体或图标集中一个可渲染的基本图形单元；图标字体中的每个图标就是一个 glyph。
- 象形图Pictogram
- 用高度概括的图形传达具体含义的符号（如厕所标识、出口标志），跨语言可读是其核心价值。
文件格式10 条
- 视口框viewBox
- SVG 根元素的坐标系统声明（如 0 0 24 24），决定图形如何映射到显示尺寸；响应式缩放的关键属性。
- 路径Path
- SVG 中用指令（M/L/C/A/Z…）描述的任意形状，是矢量图形的基本构建单元，决定图标的最终轮廓。
- 填充Fill
- 路径内部的颜色属性。fill="currentColor" 可让图标继承文字颜色，是主题化图标的推荐写法。
- 描边Stroke
- 路径边缘的线条属性。线性图标通过 stroke 绘制轮廓，可配合 stroke-linecap 控制端点形状。
- WEBPWebP
- Google 推出的现代图像格式，同等画质下比 PNG 小 25-35%，支持透明与动画，浏览器兼容已普及。
- AVIFAV1 Image File Format
- 基于 AV1 编码的新一代图像格式，压缩率优于 WEBP，适合对体积敏感的图标批量交付场景。
- PDF（矢量）Vector PDF
- PDF 可内嵌矢量路径，常用于印刷交付；矢量 PDF 放大不失真，与位图 PDF 需要区分。
设计规范10 条
- 图标栅格Icon Grid
- 绘制图标时参考的基准网格（常见 24×24），包含 keyline 参考线，用于约束形状比例与视觉居中。
- 关键线Keyline
- 栅格中的形状参考线（圆、方、竖/横矩形），让不同外形的图标在同等视觉面积下保持一致。
- 像素对齐Pixel Hinting
- 把路径关键点落在整像素边界上，避免小尺寸渲染时出现半像素模糊，是线条型图标的细节基本功。
- 视觉尺寸Optical Size
- 图标在屏幕上占用的实际观感大小。几何尺寸相同时，圆形需要略微超出方形栅格才能显得一样大。
- 视觉重量Visual Weight
- 图形吸引注意力的程度，由面积、颜色深浅、线条密度共同决定。图标集内各图标的视觉重量应接近。
- 描边宽度Stroke Width
- 线条型图标的线粗细，常见 1.5px / 2px（基于 24 栅格）。整组图标必须统一描边宽度。
- 双色调Duotone
- 用主色与半透明辅色两个层次着色的图标风格，介于线性与面性之间，信息层次更丰富。
- 面性 / 剪影风格Solid Style
- 以填充色块为主的图标风格，辨识度高、适合小尺寸；与线性风格混用时需要统一视觉重量。
- 线性风格Outline Style
- 以描边为主、无填充或少量填充的图标风格，轻盈现代，是 UI 界面的主流选择。
技术实现11 条
- Base64Base64
- 把二进制数据编码为 ASCII 文本的方案，Data URI 的载体。体积约比原始二进制大 33%。
- CSS MaskCSS Mask
- 用图像（含 SVG）作为元素遮罩的实现方式，配合 mask-color 或 background-color 即可给单色图标换色。
- SVG 雪碧图SVG Sprite
- 把多个图标合并为一个 <symbol> 集合文件，通过 <use href="#id"> 引用，减少请求数并便于缓存。
- 按需摇树Tree Shaking
- 构建工具剔除未引用模块的优化机制。使用图标库时应选择支持按需导入的包，避免全量打进 bundle。
- currentColor 关键字currentColor
- CSS 关键字，表示继承元素自身的 color 属性值。SVG 图标填充设为 currentColor 即可用 CSS 控色。
- 图标的可访问性Icon Accessibility
- 装饰性图标加 aria-hidden，承载含义的图标必须有可读文本（aria-label 或 adjacent text），纯图标按钮尤其需要注意。
- 方向翻转LTR / RTL Mirroring
- 阿拉伯语等从右向左语言中，方向性图标（箭头、返回）需要镜像翻转，非方向性图标（设置齿轮）保持原样。
- 以图搜图Visual Search
- 上传图片并检索视觉相似素材的能力，基于多模态嵌入向量比对，适合从截图里找回图标来源。
