SVG vs PNG vs JPG：图像格式优点和缺点
在为网络和其他数字用途创建图像时，哪种文件格式会给您带来最佳效果？你必须考虑速度与图像质量和规模。那么你应该使用什么：SVG vs PNG vs JPG？
曾经有一段时间你刚刚使用了一个尺寸合适的JPG来适应72 dpi的空间并继续前进。不再。高分辨率屏幕，多个视口以及需要拥有一个活泼的网站使得它成为一个更加复杂的过程。让我们深入了解每种格式的优缺点！
SVG
SVG看起来很棒，适用于除照片之外的任何类型的图像。
SVG或可缩放矢量图形非常实用。这就是设计师更频繁地使用它的原因。
因为SVG是一种矢量格式，所以它们看起来很棒，适用于除照片之外的任何类型的图像。
SVG是一种无损格式 - 意味着它在压缩时不会丢失任何数据 - 呈现无限数量的颜色，最常用于网络上的图形和徽标以及将在视网膜或其他高分辨率屏幕上查看的项目。
SVG的优点
矢量格式呈现任何大小
能够在代码或文本编辑器中创建简单的SVG渲染
从Adobe Illustrator或Sketch设计和导出复杂图形
可以访问SVG文本
SVG很容易设计风格和脚本
现代浏览器支持SVG格式，并且面向未来
格式具有高度可压缩性和轻量级
由于基于文本的格式，因此适合搜索
支持透明度
允许静止或动画图像
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是最新的格式，并且通常可以保存到最小的文件大小，但它并不总是最佳选择。
在选择文件类型时，考虑如何在项目中使用图像，以找到最适合您要完成的项目的文件类型。您甚至可能会发现项目包含使用所有三种文件类型的图像。
意派Coolsite360交互式线网页编辑系统
“创意不该受技术束缚，交互可以变得简单有趣”