魅魔纹DESIGN NOTE · 07
从草稿到矢量路径
把示意图转为可维护的轮廓：分层、描绘、镜像、闭合和整理。
位图参考与矢量原稿
本站 AI 配图是位图，放大后仍由像素构成。SVG 可以描述二维矢量以及混合图形，但把位图放进 SVG 文件，并不会自动让它成为可编辑的路径。需要改动轮廓时，仍应建立实际的节点和曲线。
分层描绘
将参考图放在底层并降低不透明度，另建“主轮廓”“内部线”“点缀”三组。在上层从最大的闭合形状开始描绘，暂时忽略纹理和发光效果。完成半边后复制翻转，先解决中心接缝，再增加细节。
区分填充与描边
填充处理形状内部，描边沿轮廓绘制。W3C 说明路径可开放或闭合，并可包含多个子路径。若需要中心镂空，应检查复合路径的填充结果；不要用一块白色盖住就认为已经透明镂空。
保留可编辑版本
整理节点并给图层命名，另存一份可继续编辑的原稿，再为使用场景导出。自动描摹可以是起点，但小碎块和锯齿节点仍需人工检查。Inkscape 官方学习页提供基础、形状及位图描摹教程，可按需要查阅。
对照着看，更容易判断
| 文件内容 | 能否直接改轮廓 | 用途 |
|---|---|---|
| 普通位图 | 通常不能逐节点改 | 参考、插画和网页展示 |
| 含位图的 SVG | 位图部分仍不可逐节点改 | 混合排版 |
| 实际矢量路径 | 可以修改节点与控制点 | 徽记迭代和尺寸适配 |
阅读依据与练习范围
- W3C：Scalable Vector Graphics (SVG) 2 ↗
支持 SVG 是二维矢量与混合图形语言、可缩放显示的说明。
- W3C：SVG 2 — Paths ↗
支持路径、直线、曲线、闭合及复合子路径的技术说明。
- Inkscape：Learning Inkscape ↗
官方学习入口，列出基础、形状、描摹等教程。具体操作随软件版本而异。
本站全部参考资料可在来源索引查阅。配图为位图示例，文中的虚构项目名称仅用于说明。