为什么你应该在您的网站上使用SVG

可扩展的矢量图形或SVG，在今天的网站设计中发挥着重要作用。如果您目前没有使用SVG在您的网络设计工作中，这里有一些原因是您应该开始这样做的原因，以及回退，您可以使用不支持这些文件的旧浏览器。

解析度

SVG的最大好处是解决独立性。因为SVG文件是矢量图形（与基于像素的光栅图像相对），您可以在不丢失图像质量的情况下调整它们的大小。当您创建必须的响应网站时，这尤其有用在各种屏幕尺寸和设备上看起来很好。您可以向上或向下扩展SVG文件，以满足响应网站的更改大小和布局需求，而不会以任何方式损害其质量。

通常，无论大小如何，SVG都有比其他格式的图像更平滑，更清晰的外观。

文件大小

使用光栅图像（例如，JPG，PNG，GIF）进行一次挑战响应网站是文件大小。由于光栅图像不扩展Vector Images Do的方式，因此必须以最大尺寸的尺寸提供基于像素的图像。这是因为您可以始终使图像更小并保留其质量，但是对于更大的图像也不是真的。结果是远远大于所查看的大小的图像，强制浏览器下载大文件。

相比之下，向量图形是可扩展的，因此无论可能需要显示这些图像的大量，都可以使用非常小的文件大小。这最终最终优化了站点的整体性能和下载速度。

CSS造型

您可以轻松地将SVG直接添加到页面的HTML。这被称为内联SVG。使用内联SVG的一个好处是，因为图形实际上由浏览器绘制，因此无需一个HTTP请求获取图像文件。

另一个好处：您可以使用CSS风格inline SVG。需要更改SVG图标的颜色？而不是编辑图形编辑软件中的图像，然后再次导出和上传文件，您可以简单地使用几行CSS更改SVG文件。您可以使用CSS更改悬停状态和其他设计需求的SVG。

动画

因为您可以使用CSS的Inline SVG文件风格，所以您可以使用CSS动画在他们身上。CSS转换和转换是将某些生命添加到SVG的两种简单方法。您可以在页面上获得丰富的闪存体验而不使用Flash - iPad不再支持。事实上，Adobe将在2020年底逐步淘汰闪光灯。

使用SVG

与SVGS一样强大，它们无法替换其他所有图像格式。需要丰富的颜色深度的照片仍然应该是JPG或PNG格式，但简单的图像如图标非常适合作为SVG执行。

SVG也适用于某些复杂的插图，例如图形，图表和公司徽标。所有这些图形都受益于可扩展，并能够使用CSS进行调整。

支持旧浏览器

当前的支持SVG.在现代Web浏览器中非常好。缺乏对这些图形的唯一浏览器是Internet Explorer（版本8及以下版本）的旧版本，以及一些旧版本的Android。总而言之，允许非常小的浏览人口仍然使用这些浏览器，并且该号码继续缩小。这意味着您可以在没有担心的情况下在网站上使用SVG。