教程5 分钟阅读
如何在线创建 SVG 图标
发布于 2026年6月 · Svggram 团队
图标对网页和应用程序设计至关重要。本指南将向您展示如何使用 Svggram 在线 SVG 编辑器创建图标。
为什么选用 SVG 制作图标？
- 可缩放 — 任何尺寸下都清晰
- 文件体积小 — 比 PNG 更小
- 易编辑 — 轻松修改颜色与形状
Steps
Step 1: 设置画布
选用正方形画布（24×24、32×32 或 48×48 像素为标准图标尺寸）。
Step 2: 选择工具
矩形工具用于基本形状，路径工具用于自定义形状，选择工具用于微调。
Step 3: 设计图标
组合矩形、圆形与线段构成图标，使用对齐工具以保证对称。
Step 4: 添加颜色与风格
选定一致的色彩风格，使用填充与描边颜色选择器。
Step 5: 导出图标
为网页使用以 SVG 保存，其他场景可导出为 PNG。
最佳实践
- 保持简洁
- 使用一致的线宽
- 基于网格设计
- 在小尺寸下测试