为什么要使用SVG文件而不是JPG

SVG的优点

当你建立一个网站并向该网站添加图像时,如果你必须确定的最重要的事情是哪一种文件格式是正确使用的文件格式。 根据图形,一种格式可能比其他格式好得多。

许多网页设计师都很喜欢JPG文件格式,这种格式非常适合深度较深的图像,如照片。 虽然这种格式也适用于简单的图形,如图示的图标,但它并不是在该实例中使用的最佳格式。 对于这些图标,SVG将是更好的选择。 我们来看看究竟是为什么:

SVG是矢量技术

这意味着它不是光栅技术。 矢量图像是使用数学创建的线条的组合。 光栅文件使用像素或颜色的小方块。 这是SVG可扩展和完美的响应式网站的一个原因,它必须随着设备的屏幕尺寸一起扩展。 因为矢量图形存在于数学世界中,所以要改变大小,只需更改数字即可。 在进行大小调整时,光栅文件通常需要进行重大修改。 当你想放大矢量图像时,不会出现失真,因为系统是数学的,浏览器只是重新计算数学运算并将线条渲染为一如既往的平滑。 当您放大光栅图像时,会失去图像质量,并且在开始查看这些像素的颜色时,文件开始变得模糊。 数学扩展和契约,像素不。 如果你想让你的图片独立解析,SVG会给你这个能力。

SVG是基于文本的

当您使用图形编辑器生成图像时,该程序会拍摄完成的图稿。 SVG的工作方式不同。 您仍然可以使用一些软件程序,并感觉您正在绘制图片,但最终产品是矢量线或字的集合(它们实际上只是页面上的矢量)。 搜索引擎会查看单词,特别是关键字。 如果您上传JPG ,您将自己限制为图形的标题,也可能是替代文本短语。 借助SVG编码,您可以扩展可能性并创建更适合搜索引擎的图像。

SVG是XML并且以其他语言格式工作

这返回到基于文本的代码。 你可以在SVG中制作你的基本图像,并使用CSS来擦亮它。 是的,您可以拥有一个实际上是SVG文件的图像,但您也可以将SVG直接编码到页面中并在将来进行编辑。 你可以用CSS改变它,就像你改变页面文本一样。这是非常强大的,它使得编辑变得简单。

SVG很容易编辑

这可能是最大的优势。 当你拍摄一个广场的照片时,它就是这样。 要进行更改,您必须重置场景并拍摄新照片。 在你知道它之前,你有40个正方形的图像,但仍然没有完全正确。 使用SVG,如果您犯了一个错误,请在文本编辑器中更改坐标或单词,然后完成。 我可以涉及到这个,因为我画了一个没有正确定位的SVG圆 。 我所要做的就是调整坐标。

JPG图像可能很重

如果你希望你的图像在物理尺寸上增长,它的文件大小也会增加。 有了SVG,无论你做多大,一英镑仍然是一磅。 2英寸宽的正方形的重量与100英寸宽的正方形的重量相同。 文件大小不会改变,从页面性能的角度来看,这是非常好的!

那哪个更好?

那么什么是更好的格式 - SVG或JPG? 这取决于图像本身。 这就像问:“什么更好,锤子还是螺丝刀?” 这取决于你需要完成什么! 这些图像格式也是如此。 如果您需要显示照片,那么JPG是您的最佳选择。 如果你添加一个图标,那么SVG可能是一个更好的选择。 您可以在这里了解更多关于何时适合使用SVG文件的信息

Jennifer Krynin的原创文章。 由Jeremy Girard于6/6/17编辑