核心差异：光栅位图与矢量路径
设计用户界面、导航栏和营销网站时，在 PNG 和 SVG 之间进行选择决定了图形在不同设备上的显示清晰度以及页面渲染速度。
- PNG（便携式网络图形）： 由二维像素网格构建的光栅格式。每个像素都存储准确的颜色和透明度（Alpha 通道）信息。
- SVG（可缩放矢量图形）： 基于 XML 的矢量格式，使用坐标以数学方式描述直线、曲线、多边形和填充。
视网膜显示屏和无限缩放
随着 4K、5K 和高 DPI 移动屏幕变得无处不在，缩放行为至关重要：
- PNG 位图： 当 24x24 像素 PNG 图标放大到 96x96 像素或在 3x Retina 显示屏上查看时，浏览器必须插入中间像素，从而导致可见的模糊和模糊边缘。
- SVG 矢量： SVG 在任何视口宽度或像素密度下动态重新计算矢量点，无论缩放级别如何，都保持 100% 清晰。
要转换旧版光栅图形或调整图像大小而不降低像素质量，请使用 ToolDolfen 的 图片尺寸调整工具 (Image Resizer) 和 PNG转JPG转换器 (PNG to JPG)。
文件大小、网络负载和 DOM 占用空间
| 公制 | SVG 图标 | PNG图标 |
|---|---|---|
| 平均文件大小 | 0.8 KB – 2.5 KB | 3 KB – 15 KB |
| Gzip / Brotli压缩 | 高度可压缩（文本/XML） | 中等可压缩 |
| CSS 颜色覆盖 | 通过即时填充： currentColor | 需要过滤器修改或交换文件 |
| 动画功能 |原生 CSS / SVG 过渡 |仅静态（除非 APNG）|
决策矩阵：何时选择 SVG 与 PNG
- 将 SVG 用于：品牌徽标、导航栏图标、UI 状态徽章、几何插图和交互式开关。
- 将 PNG 用于：带有半透明水滴的复杂屏幕截图阴影、具有数百种颜色渐变的真实感徽章以及缺乏现代矢量支持的旧环境。
访问 ToolDolfen 的 图像工具套件，以客户端速度压缩、转换和裁剪您的资源。