魅魔纹DESIGN NOTE · 08
SVG 与位图的导出检查
保留编辑稿，再检查视框、透明边缘、文件内容和目标尺寸。
按使用场景选格式
需要继续改轮廓或灵活缩放时，保留矢量源稿；需要在普通图片环境里展示时，另导出位图。格式名称并不保证内容结构：SVG 也可以包含位图，所以交付前应确认文件中真正需要编辑的部分。
理解 viewBox
W3C 文档将 viewBox 定义为四个数字：最小 x、最小 y、宽、高，它指定映射到视口的用户坐标矩形。例如 0 0 800 450 表示一个宽 800、高 450 的坐标范围；它不是单独规定最终屏幕像素数的指令。
检查裁切与透明背景
外侧描边、阴影或尖端可能越出画布。导出后查看四边，确认细节完整。透明位图应放在深浅两种背景上检查边缘，避免把白色画布误认为透明背景；纸面预览可保留底色，但要清楚命名。
给不同文件明确用途
练习可分别保存 editable.svg、preview.png 和 monochrome.svg，并附一行说明各自用途。名称仅为示例。若交给印制方，先询问其实际格式和尺寸要求，不凭网页上的图片直接推断生产规格。
对照着看，更容易判断
| 检查项 | 通过时的表现 | 不通过时 |
|---|---|---|
| 边界 | 尖端与描边完整 | 扩大视框或调整导出范围 |
| 背景 | 透明与实底版本明确 | 重新导出并命名 |
| 尺寸 | 目标大小下能辨识 | 删减细节或增大间距 |
阅读依据与练习范围
- W3C：Scalable Vector Graphics (SVG) 2 ↗
支持 SVG 是二维矢量与混合图形语言、可缩放显示的说明。
- W3C：Coordinate Systems, Transformations and Units ↗
用于核对 viewBox 的四个数值及视框映射概念。
本站全部参考资料可在来源索引查阅。配图为位图示例，文中的虚构项目名称仅用于说明。