先把问题解决
给 SVG 根元素明确的 width、height 和匹配比例的 viewBox，从 SVG 原稿直接导出目标像素的 PNG。下载后核对真实宽高、主体是否完整，再按页面展示尺寸查看。PNG 已经是栅格图片，放大预览不会补回缺少的细节。
三个尺寸问题要分别回答
先记录图片最终在哪里显示。例如某个图卡要显示为 300×150 个 CSS 像素，接收规范又要求上传 600×300 像素文件，就按该要求准备。没有统一的“高清尺寸”：最终用途、页面缩放和设备像素密度一起影响清晰度，文件体积合格也不说明像素足够。
MDN 的 viewBox 说明描述了 SVG 内部坐标矩形如何映射到视口。本例的 200×100 是绘图坐标范围；600×300 则是给浏览器的根元素尺寸。两个比例都为 2:1，不需要为放大输出把圆的所有坐标乘三。
| 项目 | 示例 | 核对对象 |
|---|---|---|
| 绘图坐标 | viewBox="0 0 200 100" | 圆与矩形是否位于该范围 |
| PNG 输出 | 600×300 像素 | 下载文件的真实宽高 |
| 页面展示 | 300×150 CSS 像素 | 实际页面中的缩放与可读性 |
先用无字体、无外链的小样定位问题
保留 SVG 原稿，打开SVG 转 PNG 工具，粘贴下面的小样，再点击“开始转换”。当前入口没有独立的输出宽高输入框，导出采用浏览器解码后的图像自然尺寸；因此本例把尺寸明确写在 SVG 根元素上。不要在工具中寻找没有提供的倍数开关。
这个小样应显示一个浅蓝圆角矩形和居中的蓝色圆，四周留有透明区域。它用于排查尺寸与坐标，不是对某份复杂设计文件兼容性的测试报告。
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="80" rx="12" fill="#dbeafe"/>
<circle cx="100" cy="50" r="28" fill="#2563eb"/>
</svg>从矢量原稿改变输出，再下载核对
- 转换后点击“下载结果”，打开下载的 PNG，在图片属性或编辑器中确认是 600×300 像素。工具里的预览会适配屏幕，不能用预览显示宽度替代文件属性。
- 把根元素 width 与 height 临时改为 200 和 100，保持 viewBox 不变，再转换下载另一份。分别在同一展示尺寸比较圆弧；这是一项可自行复现的对照，本文不声称测量了画质分数。
- 回到保留的 SVG 原稿，把 width、height 改回所需的目标尺寸并重新转换。不要先导出小 PNG，再用图片缩放工具放大来替代这一步。
- 给文件标注用途与尺寸，例如 icon-card-600x300.png。把它放进实际页面或文档，核对缩放、比例、透明区域和背景，而不只看文件管理器缩略图。
尺寸增大也会提高画布和内存需求。没有通用的最大安全像素承诺；手机处理失败时先用适量尺寸验证，避免反复尝试极大的画布。
图形被切掉时，检查坐标而不是压缩质量
在本例中，矩形从 x=10 到 x=190、从 y=10 到 y=90，落在 200×100 的坐标范围内；圆也留在范围中。如果把矩形移到 x=180 但仍保留宽 180，它就跨出了右边界。调高 PNG 质量不能把范围之外的图形搬回来。
复杂图标还要给描边、阴影和滤镜留空间。修改 viewBox 会改变取景范围，也可能改变缩放后的大小；先确认原设计的留白与边界，再调整。图形看起来被拉长时，核对宽高比与 preserveAspectRatio 设置，不要随机改几个数。
原创尺寸案例：修复的是不同问题
200×100 PNG 被放到 600×300 的位置；右边一条线在 SVG 原稿中也超出 viewBox。
从完整 SVG 原稿导出 600×300；另行调整坐标范围或图形位置，使线条进入取景范围。
交付前按真实使用场景检查
对照图片上传像素与比例指南，核对接收方指定的像素、比例和文件大小。SVG 内嵌的位图仍受原始像素限制，放大 SVG 不会自动把它变为矢量细节。
字形、外链图片和滤镜可能在浏览器中表现不同；先用无外部依赖的样本确认入口正常，再逐项检查正式文件。需要透明度时保持 PNG，并参考图片格式选择指南检查接收平台是否支持该格式。
最终 PNG 验收
- 宽高等于接收规范，而不是仅文件名写对。
- 完整边界、描边和留白都在画面中。
- 按目标展示尺寸看清细线和文字，检查没有意外拉伸。
- 透明区域放到目标背景检查，保留 SVG 原稿以便重新导出。
常见问题
只有 viewBox，没有 width 和 height 可以吗？
SVG 可以只有 viewBox，但浏览器会按上下文确定自然尺寸。为了让这个转换入口的导出像素可核对，本流程明确设置根元素 width 和 height；不要依赖缺省尺寸猜测。
为什么把 PNG 放大还是不清晰？
PNG 的像素已经固定。应回到 SVG 原稿以所需尺寸重新栅格化；原稿里本来就是位图的内容仍需要足够的原始像素。
图标中的文字换了字体怎么办？
浏览器能否加载和使用该字体会影响输出。先检查字体依赖与许可，必要时由设计源文件制作不依赖外部字体的版本；本工具没有字体打包功能。
参考资料与延伸阅读
按步骤开始处理
进入对应工具，预览处理结果，检查导出的文件。
