SVG

SVG看起来很棒，适用于除照片之外的任何类型的图像。

SVG或可缩放矢量图形非常实用。这就是设计师更频繁地使用它的原因。

因为SVG是一种矢量格式，所以它们看起来很棒，适用于除照片之外的任何类型的图像。

SVG是一种无损格式 – 意味着它在压缩时不会丢失任何数据 – 呈现无限数量的颜色，最常用于网络上的图形和徽标以及将在视网膜或其他高分辨率屏幕上查看的项目。

SVG的优点

  • 矢量格式呈现任何大小
  • 能够在代码或文本编辑器中创建简单的SVG渲染
  • 从Adobe Illustrator或Sketch设计和导出复杂图形
  • 可以访问SVG文本
  • SVG很容易设计风格和脚本
  • 现代浏览器支持SVG格式，并且面向未来
  • 格式具有高度可压缩性和轻量级
  • 由于基于文本的格式，因此适合搜索
  • 支持透明度
  • 允许静止或动画图像

SVG的缺点

  • 设计SVG可能会变得复杂
  • 不要在某些降级的浏览器上呈现
  • 电子邮件客户端支持有限

 

PNG

PNG提供了JPG无法提供的东西 – 透明度。

PNG，或便携式网络图形，是一种为网络设计的格式，提供JPG无法提供的东西 – 透明度。仅此一点就是为什么PNG如此受欢迎，以便将徽标等元素上传到网站设计中。

有两种类型的PNG – PNG-8和PNG-24。PNG-8使用更有限的调色板，只有256种颜色，透明度更好，出口尺寸更小。PNG-24使用无限的调色板，保持透明度，但出口尺寸更大。两种PNG类型都具有无损压缩。

虽然PNG格式与GIF类似，但它们不支持动画。此格式最常用于图标，小型静止图像或任何需要透明度的图像。

PNG的优点

  • 支持透明度
  • 适用于带有文字的图像
  • PNG格式可以很好地呈现徽标
  • 包括搜索引擎的嵌入式文本说明
  • PNG-8文件很小，重量最轻
  • 出口没有锯齿状边缘

PNG的缺点

  • 对于大型文件（如图像），文件大小会快速增长
  • 一些较旧的电子邮件客户端无法呈现它们
  • 没有动画
  • PNG-24文件可能变大; 不太适合网络共享

JPEG

每次重新保存照片并将其导出为JPG时，它都会降级。

JPG或联合图像专家组（JPEG）可能是最知名的图像格式。这是大多数图像保存的默认选项，因为它几乎可以无限制地显示彩色照片。

JPG还提供了选择图像压缩程度从0％（重压缩）到100％（无压缩）的能力。大多数设计师选择60％到70％的产品。图像在此压缩级别仍然看起来很好，但文件大小要小得多。

JPG使用有损压缩，并且在压缩期间不维护原始数据。每次重新保存照片并将其导出为JPG时，它都会降级。

JPG格式最常用于图像，摄影和任何具有大量颜色的东西。

JPEG的优点

  • 非常适合高色彩和摄影
  • 易于减小文件大小
  • 在电子邮件客户端中始终呈现

JPEG的缺点

  • 没有透明度
  • 为文本创建锯齿状边缘
  • 没有动画
  • 有损格式
  • 没有自动搜索元数据，必须包含alt信息

你应该使用什么格式？

现在您已经知道SVG与PNG和JPG之间存在哪些差异，您应该使用什么？

你可以问自己几个问题来得到答案。

你需要矢量或光栅格式吗？
矢量：SVG
Raster：JPG或PNG

你需要透明度吗？
是：SVG或PNG
No：JPG

你使用的是高彩色图像吗？
是：JPG或PNG
No：SVG

这是一张大照片吗？
是的：JPG
No：PNG

图像是否包含文字？
是的：PNG
No：JPG

无损压缩对您来说很重要吗？
是：SVG或PNG
No：JPG

是否需要更新和重新部署图形？
是：SVG
No：PNG或JPG

你在用动画吗？
是：SVG
No：JPG或PNG

结论

所有三种图像格式 – SVG，PNG和JPG – 都具有实用和广泛的应用。虽然SVG是最新的格式，并且通常可以保存到最小的文件大小，但它并不总是最佳选择。

在选择文件类型时，考虑如何在项目中使用图像，以找到最适合您要完成的项目的文件类型。您甚至可能会发现项目包含使用所有三种文件类型的图像。（这实际上很常见！）