可缩放矢量图形 (SVG) 是一种独特的图像格式。与其他品种不同，SVG 不依赖于独特的像素来构成您看到的图像。相反，他们使用“矢量”数据。通过使用 SVG，您可以获得可以放大到任何分辨率的图像，这在许多其他用例中对网页设计非常有用。在本文中，我们将问一个问题：什么是 SVG 文件？然后我们将教您如何使用该格式文件。

什么是 SVG 文件？

SVG 是使用矢量构建的图形。对于初学者来说，向量是具有特定大小和方向的元素。理论上，您可以使用矢量集合生成几乎任何类型的图形。以这张带有黑色边框和阴影的蓝色矩形图像为例：

这是另一种称为便携式网络图形 (PNG)的图像文件，用于插图和绘图。如果您想使用矢量图形复制类似的东西，您需要使用XML 代码生成它（与用于站点地图的代码相同。）以下代码可以获得相同的结果：

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

理论上，如果您将这段代码放入一个 HTML 文件中，您将看到一组与 PNG 相似的矩形——也就是说，只要您使用的浏览器支持 SVG 文件。尽管两个图像看起来相同，但 SVG 文件提供了其他格式所没有的一大堆好处。例如，SVG 能够在放大或缩小时保持图像质量。

如果您继续放大 PNG 矩形，您会注意到它的质量在某个时候开始下降。对于更复杂的基于像素的图形，退化会更快地变得明显。然而，SVG 在几乎任何分辨率下看起来都不错。

为什么要使用 SVG 文件？

许多网站几乎可以互换使用 PNG 和 JPEG 等格式。不过，SVG 并不是那么通用。如果您尝试使用矢量重新创建复杂的照片，通常最终会得到大量且无法使用的 SVG 文件。

SVG 格式文件使用场景：

标志设计。由于您可能会在网站和社交媒体上重复使用徽标，因此使用 SVG可以解决任何潜在的可扩展性问题。

图表。SVG 非常适合图表和任何其他依赖于纯线条的插图。

动画元素。您可以使用 CSS为 SVG设置动画，这使它们成为网站设计中的有用组件，特别是对于微交互。

图表和图形。 您可以使用 SVG 创建支持动画的可缩放图形和图表。

由于 SVG 使用 XML 格式，这也使它们既可搜索又可索引。只要您使用正确的辅助功能标签，屏幕阅读器就可以解释 SVG 文件。

最后，SVG 文件往往比其他格式的高分辨率文件小得多。在纸面上，这意味着您可以缩小一些页面大小并减少加载时间。但是，除非您计划将大部分图像转换为 SVG，否则性能提升可能很小。

如何创建 SVG 文件（2 种方式）

对于 SVG 文件，您可以采用两种方法。您可以从头开始创建它们或获取现有图像并进行转换。

1.手动创建SVG文件

创建 SVG 文件通常不需要像我们之前所做的那样输入矢量信息。您可以像创建任何其他图形一样创建 SVG， 通过使用设计程序并将文件另存为 SVG。许多现代图形设计工具都支持开箱即用的 SVG。包括：Adobe Illustrator、Photoshop、Animate和InDesign、微软 Visio等。如果您没有任何图形设计经验，为您的网站创建自己的徽标或其他元素将是一个挑战。在这种情况下，最好的办法是获取现有图像并将它们转换为 SVG。

2. 将现有图像转换为 SVG

您可以使用许多免费工具将其他格式的图像转换为 SVG。我们在上一节中提到的大多数软件都可以让您打开图像并将它们保存为 SVG 文件。

如果您不想下载任何软件，也可以使用在线转换工具。

根据经验，仅将 SVG 格式用于“简单”图像，即具有明确边界和清晰线条的图像。图像越复杂，你就越有可能最终得到一个巨大的 SVG 文件，这是一项手动编辑或动画制作的苦差事。

如何使用 SVG 文件

SVG 并不是那么难使用。将 SVG 文件添加到您的网站就像获取其代码并将其粘贴到 HTML 文档中一样简单。

如果您和您网站的访问者使用支持 SVG 文件的浏览器（现在大多数都支持），他们将能够看到该元素。当然，使用动画 SVG 有点挑战，因为它需要使用 CSS。但是，如果您使用的是 WordPress，则该过程会发生变化。内容管理系统 (CMS) 不支持开箱即用的 SVG。如果您想启用 SVG 支持以便可以将文件直接上传到您的网站，您需要使用诸如Safe SVG 之类的插件：也可以在 WordPress 中手动启用 SVG 支持，但这个过程要复杂得多。在这种情况下，使用插件是更安全的选择。

小结

调整您的网站以使用 SVG 文件比您想象的要容易得多。真正的挑战在于从头开始设计 SVG 或选择正确的图像以转换为格式。您可以使用很多工具来完成这两项工作。一些不错的选择包括Adobe Illustrator、InDesign和GIMP。使用这些工具，您可以创建现有图像并将其转换为 SVG。如果您使用的是 WordPress，则可以使用Safe SVG插件上传这些SVG，然后享受动画制作的乐趣。