SVG 转 PNG 与网站图标：如何保持比例并检查小尺寸效果

SVG 转 PNG 是把已有矢量图形渲染为固定像素图片：先预览，再设置宽度，下载后检查比例和透明背景。如果输出空白或被裁掉，应检查坐标设置和外部字体。

FormatOwl 的SVG 工具会处理经过净化的标记。建议从不依赖外部资源的静态 SVG 开始，并保留原始源文件。

转换前先预览

在SVG 查看器粘贴代码或选择文件，与原图对照。脚本、动画和外部资源会被移除或阻止，依赖这些能力的图形可能与原版不同。

viewBox 定义 SVG 内部坐标范围，宽高则与显示尺寸有关，具体关系可参考 MDN 的 viewBox 说明。需要改代码和参数时使用SVG 编辑器，它不是矢量绘图画布。

按目标选择输出

导出 PNG 时，按目标尺寸设置宽度。工具会根据原始尺寸或 viewBox 推算高度，宽度支持 1–8,192 像素，但小图标通常不需要最大尺寸。

PNG 的像素尺寸固定。以后可能需要多种规格时，保留 SVG 作为可继续编辑和导出的母版。

导出 PNG 并检查透明背景

1. 在 SVG 转 PNG中选择文件或粘贴 SVG 标记。
2. 设置需要的输出宽度，确认自动推算的宽高比例符合原稿。
3. 开始处理，检查预览是否有缺字、裁切或背景色变化。
4. 下载 PNG，分别放到浅色和深色背景上核对透明区域。

原 SVG 含有白色矩形时，渲染不会自动把它变透明；依赖外部图片、字体或脚本的内容也可能被净化规则移除。若手里只有 PNG，却想得到可编辑路径，应使用 PNG 转 SVG 描摹教程，不要把两个方向混淆。

生成网站图标

1. 准备简洁、尽量为正方形的图形。
2. 填写应用名称和主题色。
3. 生成并下载图标文件或 ZIP。
4. 按实际尺寸检查，特别是 16 像素版本。
5. 在网站自己的资源配置中接入所需文件和 manifest。

输出包括多种尺寸 PNG、多尺寸 ICO 和网页应用 manifest。非正方形图形会适配正方形输出。大图中的细节在标签页里可能难以辨认，必要时改用简化标志。

生成文件不会自动把它们部署到网站，仍要核对实际资源路径。

布局正确后再优化

优化器提供数值精度选择。减少小数位可能缩短代码，也可能改变细小曲线和间隙。请同时放大检查与缩小检查。

如果优化结果没有变小，应保留更符合用途的版本，不能只因为名称叫“优化”就认为所有指标都变好了。

Data URL 是另一种包装方式，可以选择百分号编码或 Base64。解码后返回净化过的 SVG。Data URL 不是加密，放在公开网页中的图片也不会因此变成私密内容。

常见问题

为什么导出后变成空白或少了一部分？

先比较净化后的预览，检查 viewBox 是否覆盖图形，以及内容是否依赖外部资源。保留原稿，在 SVG 编辑器中调整后再导出。

导出 PNG 后仍然可以无限放大吗？

不能。PNG 是固定像素网格，需要更大版本时从 SVG 母版重新导出，而不是反复放大已经导出的 PNG。

操作要点

• 先核对净化后的预览。
• 根据使用尺寸导出，而非一律选最大。
• 网站图标要按实际小尺寸检查。
• 保存 SVG 母版，优化后做视觉对比。

先用SVG 查看器确认图形，再选择最终输出。