SVG 与 PNG 对比:您应该选择哪种格式?
网站图标、品牌标志和界面设计请使用 SVG 格式,因为矢量路径在任何分辨率屏幕上都清晰锐利。需要用于邮件签名或社交平台固定尺寸图片时请选择 PNG。
矢量图形用数学坐标描述轮廓,同一份文件从 16px 网站图标到 2048px 导出都能保持锐利。PNG 提供的是固定像素位图,正好满足某些平台的硬性要求。本站在浏览器内将 SVG 转换为 64px, 128px, 256px, 512px, 1024px, 2048px 的 PNG 与 WebP,并在每个图标页面标注许可证与作者。界面图标和需要适应 Retina 屏幕、换色与响应式布局的徽标请用 SVG;社交卡片、应用商店封面或旧版邮件客户端等只接受固定位图的地方请用 PNG。
SVG, one file for every size
<svg viewBox="0 0 24 24" width="24" height="24" role="img" aria-label="Bell">
<path d="M12 3a6 6 0 0 0-6 6c0 4.5-1.5 5.5-1.5 5.5h15S18 13.5 18 9a6 6 0 0 0-6-6Z"/>
<path d="M10 19a2 2 0 0 0 4 0"/>
</svg>
PNG, when a fixed pixel size is required
<img src="bell-512px.png" width="512" height="512"
alt="Bell notification icon">
本站可验证的事实
- 导出格式:Optimized SVG, PNG, WebP, React TSX, Vue 3 SFC, Svelte, CSS mask or data URI, SVG sprite
- 位图导出尺寸:64px, 128px, 256px, 512px, 1024px, 2048px
- 工作台单文件上传上限:2 MB
- 每个图标页面都标注许可证与作者。