跳到内容

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
  • 每个图标页面都标注许可证与作者。

Related pages on SVG Nexus

← 实用 SVG 指南与开发教程

输入内容以搜索 76,166 个矢量图标...

方向键移动 | Enter 打开 浏览全部图标

对比

图标来源与许可

许可 商业使用 署名 修改与改色
MIT允许包内附通知允许
ISC允许包内附通知允许
Apache-2.0允许需附通知文件允许
CC BY 4.0允许必须署名允许
CC-BY-SA-4.0允许相同方式共享相同方式共享
Trademark / Brand仅限指代性使用持有者规范受限

图标预览