不要直接把 SVG 的 viewBox 数值当作 PNG 的宽高。先确定最大的实际显示尺寸和所需清晰度，保持原始宽高比，再到真实使用位置检查结果。
SVG → PNG
区分 SVG 坐标与 PNG 像素
SVG 使用坐标、路径、形状和文字等指令描述图形。viewBox 的四个数值分别定义内部用户坐标区域的起点、宽度和高度，它们负责把图形映射到视口，却不会自动规定导出 PNG 时要有多少像素。同一个 SVG 可以被渲染成 24 像素的工具栏图标，也可以成为几百像素宽的文档插图或演示图。因此，看到 viewBox 后不应立刻照抄数字，而要先明确图像最终放在哪里、会显示多大。
PNG 保存的是在固定像素网格上渲染后的结果。导出完成后再放大 PNG，只会重新采样已有像素，不会恢复 SVG 那种按形状重新计算的缩放能力。若机械地把 100×100 的 viewBox 导出为 100×100 像素，文件可能在目标位置不够清晰，也可能对很小的用途来说过大。转换前应记录最大显示宽高、是否会被放大，以及是否需要照顾高像素密度屏幕。
- 把 viewBox 当作内部坐标，而不是固定像素
- 导出前先记录最大的实际显示尺寸
可无限缩放是 SVG 源文件的特性，导出的 PNG 只有固定像素网格。
从真实显示目标反推输出大小
网页中显示为 200 CSS 像素宽的图形，为了在高密度屏幕上保持锐利，有时会准备像素宽度更大的源图。但倍率并非越高越好，尺寸增加通常也会提高文件体积和处理成本。应选择一个符合实际场景的候选尺寸，把它放进目标页面或设备中查看，再根据清晰度和加载成本调整，而不是直接选择工具允许的最大值。
如果同一图形会用于工具栏、帮助文档和演示文稿，应分别列出这些位置的显示尺寸。为差异很大的用途准备多个输出版本，可以避免所有地方都下载一张过大的 PNG，也能避免把小图强行拉大。建议在经过验证的文件名中标注像素宽高，并保留用途说明，这样团队成员以后不容易把图标版和大图版混用。
- 分别定义网页、应用、文档和幻灯片的尺寸
- 用途差异很大时准备多个输出版本
有依据的输出尺寸来自明确的摆放位置，而不是一个看起来整齐的整数。
同时检查宽高比与内部留白
当 SVG 的 viewBox 比例与 PNG 输出矩形不一致时，渲染器必须处理这项差异。根据源文件和转换设置，结果可能保持图形比例并增加空白，也可能裁掉边缘，甚至把图形拉伸。除非变形是有意设计，否则不要独立修改宽和高。先计算源比例，再联动调整两个尺寸，并通过实际导出确认工具采取的是不是你预期的适配方式。
还要区分画布尺寸与图形真正占用的区域。有些 SVG 的 viewBox 包含大量空白，即使增加 PNG 的总像素，标志或图标在画面里仍然显得很小。如果可以编辑源文件，应在 SVG 中修正不必要的空白；无法修改时，可在导出后谨慎裁切，但要保留有意设置的呼吸空间和阴影。单纯增加像素既不能去掉内部空白，也不能修复错误裁切。
- 让输出矩形与源文件比例一致
- 分别查看画布范围和图形占用范围
按同一比例改变宽高，才能避免无意的横向或纵向拉伸。
测试细线、文字与链接资源
在矢量预览中平滑的细线，缩成小 PNG 后可能落在像素边界之间，于是显得发虚或粗细不均。小字和狭窄间隙也可能粘连。检查时既要适度放大寻找问题，也要回到用户真正看到的显示尺寸。若最小版本已经难以辨认，可考虑增强线宽、减少细节、增加可用输出尺寸，或专门制作简化的小尺寸版本，而不是只依赖更大的原图再缩小。
部分 SVG 依赖外部字体、图片、样式表、蒙版或滤镜。预览环境具备这些资源，不代表转换环境也能读取它们。字体替换会改变字宽和换行，链接图片加载失败则会留下缺失区域。应把 PNG 与可信的源文件渲染结果并排比较：文字标志逐字检查，插图则确认图像、渐变、蒙版和阴影全部存在。像素尺寸正确并不能弥补源依赖丢失。
- 在实际显示大小下检查线条和文字
- 确认字体和链接图片已正确渲染
正确的宽高并不保证转换忠实，源文件依赖项同样需要完整。
在真实场景中验证下载的 PNG
先选一个有代表性的 SVG，在 SVG 转 PNG 工具中输入选定的宽高。下载后使用独立图片查看器确认真实像素尺寸，并检查宽高比、空白、裁切、颜色、文字和线条是否一致。如果图形需要透明背景，应把 PNG 分别放到浅色和深色背景上，查看是否出现意外白底或边缘光晕。不要只依赖转换页面里的预览，因为预览不一定等同于最终保存文件。
最后把同一份 PNG 插入目标网页、应用或文档，在计划中的最小和最大显示尺寸下检查，确认系统没有把它放大到预期之外。如果画面发虚，应先区分原因：输出像素不足、字体或链接资源在转换时改变，还是下游系统又进行缩放。批准后的版本可在文件名中写明尺寸，同时保存 SVG 原稿，方便以后干净地生成其他大小。再用至少一个主要浏览器或查看器复核，可把导出问题与显示环境的插值问题区分开来，减少无意义的反复转换。
批量转换前，再挑一份内容不同的 SVG 复测。例如，含有大量文字的图表与只有几何形状的图标，对同一像素尺寸的反应可能完全不同。记录已经通过检查的宽高、背景颜色和目标位置，并把这些信息与文件一起交付。若以后出现模糊或裁切，团队就能回到明确的设置逐项排查，而不是反复猜测尺寸或对已经压成 PNG 的文件继续放大。这个记录也能帮助后续维护者重现相同结果，避免把显示差异误判为源文件损坏。
- 在下载文件中确认真实像素宽高
- 把同一文件放入最小和最大的目标位置
只有在用户真正观看的环境中表现正确，PNG 才算通过检查。
要点总结
- viewBox 定义的是 SVG 内部坐标区域，并不是 PNG 必须采用的像素数。
- 应根据最大的实际显示尺寸和所需显示密度选择输出尺寸。
- 除非确实要裁切或拉伸，否则应保持源文件的宽高比。
- 导出后要检查细线、文字、外部资源、留白和透明区域。
常见问题
viewBox 是 100×100，PNG 就必须是 100×100 像素吗？
不是。viewBox 定义内部坐标区域，PNG 像素尺寸应在渲染时根据实际用途和显示密度选择。
PNG 做得越大就一定越清晰吗？
不一定。更多像素可能有助于较大显示，但字体缺失、下游放大和过细设计等问题仍需单独处理。
分别修改宽度和高度会怎样？
这会改变宽高比，并可能造成拉伸、裁切或额外留白。除非是有意设计，否则应保持原比例。
为什么大尺寸 PNG 里的图形仍然很小？
SVG 的 viewBox 可能包含较多内部空白。除了外层画布尺寸，还要检查实际路径和形状占用的范围。
导出后最需要检查什么？
确认像素尺寸、比例、留白、裁切、透明度、文字、线条和链接资源，并把文件放到真实目标位置测试。