使用 SVG 文件，您可以为网站访问者提供强大的图形，加载速度快且美观。（更不用说，使用 SVG 文件可以增强您的 SEO 工作。） 

有了这些潜在的结果，为什么只有 54% 的网站使用 SVG 文件？事实上，在线图像优化并不容易。高质量的 图像分辨率、 响应式设计和 动画 可以改善任何网站。但如果做得不好，它们可能会极大地影响用户体验和网站速度——而且不是积极的影响。 

什么是 SVG 文件？

SVG 文件是可缩放矢量图形文件的缩写，是一种用于在互联网上渲染二维图像的标准图形文件类型。SVG 文件将图像存储为矢量，并以生成清晰的图形而闻名，同时保持针对搜索引擎的优化。

SVG 是网站设计中的一个魔术。这种文件类型是可编程的，通常比其他格式小，甚至能够制作动态动画。 

您可能已经注意到，一个关键的区别因素是 SVG 文件将图形存储为矢量。这就引出了一个问题：矢量图像到底是什么？ 

光栅图像与矢量图像 

我们可以将当今互联网上使用的图像文件格式分为两类：光栅图形和矢量图形。

您可能熟悉常见的图像格式 PNG 和 JPEG。这些是光栅图形格式，这意味着它们将图像信息存储在称为位图的彩色方块网格中。该位图中的方块组合起来形成连贯的图像，就像计算机屏幕上的像素一样。

光栅图形非常适合高度详细的图像，例如照片，其中每个像素都有特定的颜色。光栅图像具有固定的分辨率，因此增加其尺寸会降低图像的质量。

矢量图形格式（例如 SVG 和 PDF）是不同的。这些格式将图像存储为一组点和点之间的线。数学公式规定了这些点和线的位置和形状，并在图像放大或缩小时保持它们的空间关系。矢量图形文件还存储颜色信息，甚至可以显示文本。

SVG 文件的工作原理

SVG 文件是 用 XML 编写的，XML 是一种用于存储和传输数字信息的标记语言。SVG 文件中的 XML 代码指定组成图像的所有形状、颜色和文本。

如何打开 SVG 文件

好消息是大多数浏览器都设计用于渲染、解释和显示 SVG 文件。要打开 .svg 文件，请启动浏览器，然后打开该文件，它将显示在您的浏览器中。

现在让我们看看网站倾向于如何应用 SVG。

SVG 文件有什么用途？

SVG 文件最适合包含比照片更少的细节的图像。这仍然相当广泛，所以让我们在线讨论 SVG 的一些最常见用途。

SVG 文件的优点

XML 代码不仅看起来很整洁，它还使 SVG 文件对于网站和 Web 应用程序来说功能强大且实用，正如我们将在本节中探讨的那样。

1. 无限的可扩展性

正如名称所示：您可以将 SVG 缩小或扩展至任意大小，而不会损失质量。图像大小和显示类型对于 SVG 来说并不重要——它们看起来总是一样的。因此，如果质量对您很重要，SVG 文件是粉丝的最爱。

这很重要，因为网页图像的大小因浏览器窗口尺寸、设备、缩放比例、网站布局和响应式设计而异。您的图像必须向每个观看者完全呈现，而 SVG 使这变得更加容易。

2. 定制

SVG 使设计人员和开发人员能够对其外观进行大量控制。您可以使用多种 SVG 兼容编辑程序之一来更改矢量形状、颜色、文本，甚至其他视觉效果（例如颜色渐变和阴影），而不是直接在文本编辑器中修改文件。

3. 脚本兼容性

SVG 文件格式由 万维网联盟开发 ，作为 Web 图形的标准化格式，旨在与 HTML、CSS、JavaScript 和文档对象模型等其他 Web 约定配合使用。

由于这种兼容性，您可以使用脚本控制 SVG 图像。这为各种动态显示可能性打开了大门，从动画到动态图表再到移动响应图像。对于 JPEG 和 PNG 格式，无法实现这种级别的外观控制。

4. 可访问性和搜索引擎优化

SVG 文件是文本文件，与光栅格式相比具有一些优势。首先，正如我们所讨论的，程序员可以查看 XML 代码并快速理解它。

此外，如果 SVG 图形包含文本，则文本信息将作为文字文本（而不是形状）存储在文件中。这使得屏幕阅读器能够解读 SVG，从而帮助那些在与数字内容交互时遇到困难的人。

5. 较小的文件大小

如果图像不太详细，SVG 文件比常见的光栅格式更有效地存储图像。SVG 文件包含足够的信息来显示任何比例的矢量，而位图需要更大的文件来放大图像版本 - 更多像素使用更多文件空间。

SVG 文件的缺点

虽然 SVG 图像有许多很好的用例，但这可能不是每个项目的最佳格式。您不选择使用 SVG 文件有两个显着原因。

1. 不适合高质量或详细照片的格式。

设计师使用点和路径而不是像素创建矢量图形。因此，您可以通过跟踪照片或使用转换器将照片转换为 SVG 来创建矢量图形。但您的最终图像看起来并不完全像您的照片。

2.需要一定的代码知识。

SVG 是一种基于 XML 的图形场景描述语言。许多网页设计师使用 HTML 来调整字体、间距等。与HTML一样，SVG 非常适合具有一定工程知识的人。但如果您不习惯操作代码，这可能不是您最喜欢的图像格式。