svg是什么,它有什么优缺点

917 阅读2分钟

1.  什么是SVG矢量图

SVG全称Scalable Vector Graphics,它是网络上使用最广泛的矢量图格式。我们将从以下几个方面对SVG矢量图进行详细分析:

  • 可扩展: SVG矢量图文件格式可以在不损害图像质量的情况下放大或缩小。
  • 矢量:SVG矢量图的本质上是实时渲染图像的代码片段,将其转换为你在屏幕上看到的像素。
  • 图形: SVG 是一种图像文件类型,其它的图像文件类型还包括:PNG、JPEG 或 GIF。
  • 当进行页面加载操作时,此SVG矢量图代码将转换为图形。它最大的特点就是可以将图片缩放到任何分辨率无论大小都不会损失质量。
  • 动画与透明度:SVG 支持动画和透明度,使其成为一种通用的文件格式。

但SVG矢量图不像 PNG 等更标准的格式应用的广泛,因此,SVG矢量图一般不支持在较旧的浏览器和设备上运行,而且如果你想将SVG矢量图上传到你的站点并使其正确显示,一般来说也是比较困难的。

2.  SVG矢量图的优缺点

虽然SVG矢量图没有PNG等光栅文件类型应用的广泛,但SVG矢量图的流行程度正在迅速增长。SVG矢量图能完成一些光栅图像无法完成的基本任务。这也是人们喜欢SVG矢量图 的原因。下面我们来看看SVG矢量图的优缺点吧:

  • SVG矢量图是可缩放的。你可以在任何分辨率的情况下进行设计,它可以放大或缩小尺寸而不会损坏质量。
  • 由于从未经历过质量损失,SVG矢量图总是看起来清晰漂亮。
  • 由于 SVG 只是代码,因此它们的文件大小并不大且经过了很好的优化。
  • SVG 优化器的存在使它们更易于管理。如果你改用SVG,你的网站可能会加载得更快一些,并且SVG 支持动画。

虽然SVG与PNG相比有相当多的优势,从可扩展到更小的尺寸,但 SVG也有较明显的缺点:

  • SVG在工作中可能会遇到在旧浏览器和设备上不兼容。
  • SVG 需要特殊的程序来创建和编辑。虽然你可以只使用 XML 来设计SVG格式,但这并不总是有效的。
  • SVG矢量图不像 PNG 那样容易嵌入。但使用在线协同设计工具Pixso,可一键导入导出SVG矢量图,
  • SVG矢量图必须在页面加载时由浏览器呈现,因此使用过多的 SVG 或包含许多矢量的大文件会对设备造成一定负担。