对比
PNG 与 SVG
PNG 是由像素构成的栅格图像；SVG 描述可在不同尺寸缩放的矢量形状。应根据素材是像素图，还是需要在多种尺寸保持清晰的几何图形来选择。
应该选择哪种格式？
截图、完成的栅格作品和广泛兼容场景选 PNG；需要缩放的徽标、图标和示意图可选 SVG，但先检查来源安全。
适用于 PNG
界面图形 · 屏幕截图 · 透明图像
- 需要透明度的图像
- 文字和线条图
适用于 SVG
徽标、图标和图表 · 需要缩放的界面图形
- 跨屏缩放的插图
- 可编辑图形
基本信息
| 项目 | PNG | SVG |
|---|---|---|
| 扩展名 | .png | .svg |
| MIME 类型 | image/png | image/svg+xml |
| 常见用途 | 界面图形 · 屏幕截图 · 透明图像 | 徽标、图标和图表 · 需要缩放的界面图形 |
| 打开方式 | 大多数系统查看器、网页浏览器和图像编辑器都能打开 PNG 文件。 | 用浏览器、矢量编辑器或兼容查看器打开。 |
| 导出或转换 | 只有在不再需要透明度和无损质量时才转换为 JPEG。请保留原 PNG，并从应用程序导出。 | 需要位图时导出PNG，并检查尺寸、字体、颜色和透明度。 |
按用途选择
需要透明度的图像
界面图形 · 屏幕截图 · 透明图像
PNG文字和线条图
界面图形 · 屏幕截图 · 透明图像
PNG跨屏缩放的插图
徽标、图标和图表 · 需要缩放的界面图形
SVG可编辑图形
徽标、图标和图表 · 需要缩放的界面图形
SVG关键点 1
PNG 保存像素，广泛支持栅格图像。
进一步了解差异关键点 2
SVG 描述矢量形状，在内容允许时可清晰缩放。
进一步了解差异进一步了解差异
在实际显示尺寸测试素材，并在转换后检查透明度、字体和视觉效果。将外部来源的 SVG 视为可能含有活动内容的文件，嵌入前先审查。
- PNG 适合像素成品图和截图。
- SVG 适合需要多种尺寸的徽标和图标。
- 复杂效果在不同 SVG 工具和浏览器中的呈现可能不同。
常见问题
所有徽标都应该用 SVG 吗？
SVG 通常适合可缩放徽标，但仍需检查渲染器支持和源文件内容。若目标流程需要，也应保留栅格备用图。