SVG 转 PNG 转换器

SVG 转 PNG 转换器把矢量图形栅格化为你指定的精确像素尺寸的 PNG。它接受粘贴到文本区的原始 SVG 标记，或上传的 .svg 文件，同时显示源图和结果的实时预览，并让你选择保留透明度或铺平到白底。由于 SVG 与分辨率无关，转换器会先在目标尺寸下重新渲染图形，再绘制到 canvas，所以更大的导出是清晰的，而不是放大的模糊图。

四步完成 SVG 转换

1. 添加 SVG。 把标记粘贴到文本区，或点击”上传 .svg 文件”选择一个文件。只要标记里出现 svg 开始标签，预览就会渲染。
2. 检查实时预览和检测到的尺寸。 每次粘贴或上传时，宽度和高度字段都会自动填入文件中的值。
3. 调整输出。 输入新的像素尺寸即可缩放栅格图；如果不想要透明，勾选白色背景选项。
4. 转换并下载。 点击”转换为 PNG”，查看栅格化预览，然后点击”下载”保存文件。

输出尺寸如何确定

工具按以下优先级为每一侧独立确定尺寸：

1. svg 标签上的数值型 width 和 height 属性。带 px 之类的单位没问题，百分比会被忽略。
2. viewBox 的宽度和高度，在对应属性缺失时按侧回退使用。
3. SVG 规范默认的 300×150。

检测到的值会四舍五入为整数像素，并钳制到最小值 1，因为 canvas 不能有小数尺寸。检测完成后你可以覆盖任一字段，转换就使用这些字段中的值。

两个尺寸完全按输入值使用，因此工具本身不保持宽高比。如果源图是 200×100，而你把输出设为 400×100，结果会在相同高度下被水平拉宽一倍。要按比例缩放，请把两个数字同乘或同除同一个系数。栅格图本身由 Canvas API 生成：浏览器按请求尺寸渲染 SVG，把它画到相应像素数的 canvas 上，再导出为可下载的 PNG blob。

实操示例

源 SVG	检测到的尺寸	说明
width=“24” height=“24” viewBox=“0 0 24 24”	24 x 24	属性优先；要 2x 导出就输入 48 x 48。
viewBox=“0 0 100 50”，无 width 或 height	100 x 50	两侧都回退到 viewBox。
width=“100%” viewBox=“0 0 300 150”	300 x 150	百分比不可用，于是由 viewBox 提供尺寸。
无 width、height 或 viewBox	300 x 150	规范默认值是最后的选择。

文件名同样会被 slug 化：Company Logo v2.svg 变成 company-logo-v2.png，icon_final(1).svg 变成 icon-final-1.png，没有文件名的标记则下载为 image.png。

透明度与背景

默认情况下 canvas 被清为透明，绘制后再导出为带 alpha 通道的 PNG，因此图形可以叠到任何页面颜色上。勾选白色背景复选框会在绘制图形前用 #ffffff 填满整个 canvas，产出不透明白底的图像。工具没有其他背景色选择器，也不能导出 JPEG 或 WebP；输出始终是 PNG。PNG 是无损的，所以复杂的 SVG 可能生成相当大的文件，这正是单独的图片压缩器能帮上忙的地方。

哪些内容能可靠栅格化（哪些不能）

形状、路径、内联填充与描边、渐变、剪裁路径、内联 style 块，以及以 base64 data URI 内嵌的图片通常能忠实渲染。以下则是常见的麻烦来源：

• 外部引用。 从 blob 加载的 SVG 不会去获取外链图片、远程字体和外部样式表，因此这些元素会消失。
• 实时文字。 文字使用浏览器能解析到的字体绘制；未内嵌的 webfont 会回退到默认字体。当字型必须精确时，请把文字转成路径。
• foreignObject。 嵌入 SVG 内的 HTML 在各浏览器中渲染不一致，可能被整个丢弃。
• 滤镜与高级 CSS。 某些滤镜效果和 CSS 特性依赖浏览器，请在目标浏览器上测试结果。
• Canvas 污染。 如果外部图片确实加载成功，它可能污染 canvas 并导致 PNG 导出失败；这种情况下工具会给出转换错误。

常见错误

• 忘记内嵌资源。 半空白 PNG 最常见的原因就是图形引用了外部文件。
• 只改一个维度。 没有宽高比锁定，只改宽度而不改高度会把图像拉伸。
• 期待存在缩放倍数。 要 2x 必须把两个数字都加倍；没有专门的比例因子。
• 粘贴百分比尺寸的 SVG 却期待渲染宽度。 它会解析为 viewBox 或 300×150，而不是你的页面宽度。
• 把预览当作像素级精确。 屏幕上的预览会缩放以适应页面；导出的 PNG 使用字段中的数字。
• 以为存在批处理模式。 每次转换只处理一个 SVG。

相关工具

• 图片压缩 — 在浏览器中压缩和调整 PNG/JPEG 图片。
• Favicon 生成器 — 为网站生成多尺寸 favicon PNG。
• 图片格式转换器 — 把 PNG 转换为 JPEG、WebP 等格式。
• 图片转 Base64 — 将图片转换为 Base64 data URI。