什么是SVG？它的优点和用途及如何应用到WordPress

可缩放矢量图形 (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在几乎任何分辨率下看起来都不错。

假设您正在建设一个网站。您可能需要一些图片。

你应该使用哪种文件类型？

你的直觉可能是 JPEG 或 PNG。也许你会疯狂地加入一些 GIF。

但是……有什么区别呢？下面是几种常见格式的比较：

JPEG（联合图像专家组）

• 优点 文件较小，非常适合复杂图像。
• 缺点：压缩后质量下降，没有透明度。

PNG（便携式网络图形）

• 优点：无损压缩，支持透明度： 无损压缩，支持透明度。
• 缺点：文件比 JPEG 大。

GIF（图形交换格式）

• 优点：支持简单动画，文件小： 支持简单动画，文件小。
• 缺点：颜色有限，看起来有像素感。

这些格式看似多种多样。然而，它们都是光栅图像的例子。

光栅（或位图）图像由精确放置的像素绘制而成。它们有固定的尺寸、颜色和形状。

这些文件类型非常适合共享细节丰富的图像，如高质量照片。

缺点是无法更改或拉伸原始图像。你只能在上面涂画或添加更多像素。

SVG 为何如此有用

SVG（可缩放矢量图形）格式则不同。

矢量文件包含一组关于如何构建图像的文本说明。这些文件是用 XML（可扩展标记语言）编写的。

当你尝试加载一个 SVG 文件时，你的设备会查看这些说明，并按需构建图片。

这种系统有几个优点：

• SVG 可以缩放成任何大小，而且看起来依然完美。
• 它们还可以像代码文件一样进行编辑。
• 您甚至可以使用 CSS 为其设计样式。
• 由于 SVGs 是由文本组成的，因此它们的文件大小非常小。
• 这意味着它们在网络服务器上占用的存储空间更少。
• 而且它们的加载速度比光栅图形更快。

使用 SVGs 的另一个好处是提高了可访问性。你可以根据用户的需求在本地设备上调整这些文件，屏幕阅读器也可以解读它们。

SVGs 的缺点是，如果包含大量细节，它们会变得非常大。另外，您无法像优化光栅图像那样优化它们。如果要分享摄影作品，最好使用 JPEG。

但对于大多数其他视觉内容来说，SVG 格式是一个不错的选择。

SVG 图像的常见用途

虽然 SVG 的用途非常广泛，但它们在网页设计中主要以以下形式出现：

• 图标：从社交媒体链接到购物车按钮，SVG 图标在任何设备上都显得清晰明了。
• Logo：将您的品牌 Logo 保存为 SVG，可以确保它在任何地方都能完美呈现–从小小的移动屏幕到巨大的广告牌。
• 插画：现在，许多网站都使用 SVG 插画，而不是图片库中的图片。即使图形非常精细，它们也能完美缩放。
• 动画：是的，SVG 可以移动！您可以将它们制作成动画，为网站增添光彩，比如旋转的徽标或跳舞的角色。
• 信息图表：由于 SVGs 可以缩放，因此您还可以用它来制作交互式数据可视化图。非常酷！

免费 SVG 资源

使用别人的设计是更简单的选择。幸运的是，网上有成千上万的 SVG 可供下载。

许多SVG对于个人项目是免费的，但如果用于商业用途，则可能需要付费。

以下是我们最喜欢的一些资源：

• Font Awesome：广受欢迎的 SVG 图标包。
• Freepik：庞大的矢量图形、插画和图标数据库。
• Lineicons：包含 8,400 多个简洁的图标。
• Free SVG：完全免费的 SVG 插画库。
• Open Doodles：免费的彩色人物插画。
• IconScout：可搜索超过 950 万个资产库，包括免费和付费图标、插画、Logo 等。
• DrawKit：多个免费和收费的 2D/3D 插画包。
• unDraw：大量优秀的免费 SVG 插画。

为什么要使用SVG文件？

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

不过，SVG格式是一整套其他场景的绝佳选择：

• Logo设计。由于您可能会在网站和社交媒体上重复使用Logo，因此使用SVG可以解决任何潜在的可扩展性问题。
• 简图。SVG非常适合图表和任何其他依赖于纯线条的插画。
• 动画元素。您可以使用CSS为SVG设置动画，这使它们成为网站设计中的有用组件，特别是对于微交互。
• 图表和图形。 您可以使用SVG创建支持动画的可缩放图形和图表。

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

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

如何创建SVG文件

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

1. 手动创建SVG文件

创建SVG文件通常不需要像我们之前所做的那样输入矢量信息。那只是展示概念的一个例子。相反，您可以像创建任何其他图形一样创建SVG-通过使用设计程序并将文件另存为SVG。许多现代图形设计工具都支持开箱即用的 SVG。一些顶级选项包括：

• Adobe Illustrator、Photoshop、Animate和InDesign
• Microsoft Visio
• Inkscape
• GIMP
• Figma：非常适合协同设计工作。
• Sketch：Illustrator 的轻便替代品，深受界面设计师的欢迎。

此列表中的 Inkscape 和 GIMP 两个选项是开源解决方案。这使它们成为尝试创建 SVG 的绝佳选择，而无需支付高级软件费用。事实上，它们可能就是你所需要的。

如果您没有任何图形设计经验，为您的网站创建自己的徽标或其他元素将是一个挑战。在这种情况下，最好的办法是获取现有图像并将它们转换为SVG。

下面以 Inkscape 为例，简单介绍如何通过软件创建 SVG：

Step 1. 设置画布

如果你要重新开始，你需要为你的作品创建一个画布。在 Inkscape 中，访问 File > New，然后选择新图像的尺寸。

如果你想编辑现有的 SVG 文档，请访问 File > Open，启动编辑器。

Step 2. 绘制你的设计

矢量编辑中最重要的工具是 Bezier 工具。你可以从工作区左侧的工具栏中选择它。其图标看起来就像一支正在绘制曲线的钢笔。

使用该工具，只需点击几下就能创建直线和完美曲线。

您创建的每个形状都包含单独的路径和点，这些路径和点都记录在底层 XML 代码中。

一旦对结构感到满意，就可以通过 Object Properties（对象属性） 面板添加自己喜欢的颜色。

对象属性选项将出现在右侧菜单中。

专业提示：想深入学习矢量编辑吗？Inkscape 的免费教程库就在这里。

Step 4. 另存为 SVG

对图形满意后，前往 File >Save As，选择 SVG 作为格式。

给它取一个很酷的名字，然后点击保存！

2. 将现有图像转换为SVG

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

如果您不想下载任何软件，也可以使用在线转换工具——您可以使用大量 服务。一个例子是Vector Magic，您可以使用它来将各种文件类型转换为SVG：

我们喜欢这个特殊的工具，因为它会在您下载之前显示您的SVG文件的预览。您还可以使用内置编辑器在下载文件之前进行小的更改和更正：

当然，这只是一种选择。其他PNG和JPG到SVG格式转换服务包括 Convertio 和 Img2Go。您需要进行一些研究，以找到最适合您需求的解决方案。

根据我们的经验，大多数SVG格式转换工具提供类似质量的结果。为了获得最佳效果，您使用的格式转换工具与您选择的图像无关。

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

如何使用SVG文件

下面我们将对 SVG 的网站应用进行详细的说明，包括如何添加 SVG 至网站，启用 WordPress 网站 SVG 支持及对 SVG 文件进行样式化等。

如何在网站上添加 SVG

您已经完成了矢量杰作。现在，全世界都应该看到它。

您可以在网站的 HTML 中嵌入 SVG。您所需要的只是一个指向文件的<img>标记。它应该是这样的

<img src=“my-awesome-svg.svg” alt=“My Awesome SVG”>

另外，您也可以使用 <svg> 标签将 SVG 文件中的 XML 代码直接插入网页。

下面是一个例子：

<svg width=“200” height=“200”>
<circle cx=“50” cy=“50” r=“40” stroke=“red” stroke-width=“2” fill=“green” /> <p
</svg>

这段代码将生成一个漂亮的圆形按钮，红色轮廓，绿色内部。

在 WordPress 中启用 SVG

SVG并不是那么难使用。将SVG文件添加到您的网站就像获取其代码并将其粘贴到HTML文档中一样简单，只要您希望图像可以放置。

如果您和您网站的访问者使用支持SVG文件的浏览器（现在大多数都支持），他们将能够看到该元素。当然，动画SVG更棘手，因为它需要使用CSS。

但是，如果您使用的是WordPress，则该过程会发生变化。内容管理系统 (CMS) 不支持开箱即用的SVG。如果您想启用SVG支持以便可以将文件直接上传到您的网站，您需要使用诸如 Safe SVG 和 SVG Support 之类的插件：

也可以在WordPress中手动启用SVG支持，但这个过程要复杂得多。在这种情况下，使用插件是更安全的选择。

使用 CSS 创建 SVG 风格

如果您使用 <svg> 标记嵌入 SVG 文件，您可以使用 CSS 更改图像的外观。

假如你创建了一个绿色图形，但你希望它在网站上显示为红色。无需创建新的副本，只需编写以下样式即可：

svg {
stroke: red；
fill: blue；
}

stroke 属性定义图形轮廓的颜色。同时，填充属性控制线条之间的颜色。

提示：还有更多属性可以使用。

让 SVG 图像具有响应性

SVG 文件可以无限扩展，因此可以用于响应式设计。这只需要一点 CSS 技巧。

下面是一个分步演示：

1. 使用 <svg> 标记嵌入图片。这意味着你可以通过 CSS 进行修改。

2. 移除高度和宽度尺寸。这将迫使 SVG 适应其容器。确保保留 viewBox 部分。它应该是这样的

<svg viewBox="0 0 20 20" xmlns="https://example.com/file.svg">
<!-- svg content here -->
</svg>

3. 设置 SVG 的最大尺寸。这样可以防止图像溢出容器。例如

svg { display: inline-block； max-width: 100%； }

这样就完成了！

专业建议：如果这一切听起来有点技术性，不妨试试 .NET Framework。它是一款人工智能建站工具，能为你处理网站的样式设计。

SVG 高级技巧

我们已经介绍了创建和共享 SVG 的基础知识。最后，让我们来学习一些高级技巧。

1. 为 SVG 图形制作动画

你知道可以让 SVG 跳舞吗？是的，这种文件类型可以制作动画。

与原始图像一样，您可以使用简单的 XML 代码为图形制作动画。只需在形状中添加一个 <animate> 元素 ，就能让图形动起来。

看起来应该是这样的：

<svg width="100%" height="auto" xmlns="https://example.com/file.svg">
<circle cx="50" cy="50" r="50" style="fill:red;">
<animate
attributeName="cx"
begin="0s"
dur="5s"
from="30"
to="90%"
repeatCount="indefinite" />
</circle>
</svg>

您可以使用此技术为图标添加一点动感，创建页面加载指示器，甚至设计动画广告。

2. 使用 SVG Sprites 加快加载速度

SVG Sprites 就像是图标的精选集。你可以将所有图标捆绑到一个 SVG 文件中，而不是拥有几十个单独的图标文件。

这意味着无论使用多少图标，每个页面都只需进行一次 HTTP 请求。这是缩短加载时间和节省带宽的好方法。

如今，许多图标包都以 Sprite 形式提供。你也可以自己制作。

要在网站上嵌入某个图标，只需在 Sprite  文件中精确定位保存该图标的区域即可。您可以使用基本的 CSS 代码来实现这一点：

#button {
width: 20px;
height: 20px;
background: url('sprite.svg') -128px 0;
}

建议：我们建议使用 CSS Sprites Generator 这样的在线工具来计算正确的距离。

3. 优化 SVG 文件，提高性能

虽然 SVG 文件一开始很小，但您可以对其进行优化，使其更加轻便。

具体方法如下：

• 使用 SVGOMG 这样的工具。是的，这是一个真实的东西。这是一个很棒的小网络应用程序，能让你在不降低质量的情况下压缩 SVG。
• 尽可能简化路径。复杂的图形会变成大量的 XML 代码。许多矢量图形编辑器都有这方面的工具。(在 Inkscape 中，Path > Simplify）。
• 考虑懒加载首屏下方的 SVG。通过延迟加载页面下方的图片，可以减少多张图片的影响。

4. 让您的图形易于访问

由于 SVGs 是基于文本的文件，因此屏幕阅读器和其他辅助软件很容易理解。

尽管如此，您仍然可以采取一些措施，使它们更易于访问：

• 在 SVG 文件中包含 <title> 和 <desc>。这些元素提供了对图形的描述，对依赖屏幕阅读器的用户特别有帮助。
• 添加 role="img" 属性。这将告知辅助技术，SVG 是一幅图像。
• 填写 aria-labelledby 属性。 该属性应引用 <title> 和 <desc> 元素的 ID，将它们链接为图片的标签。
• 对于更复杂的 SVG，可提供 alt 文本。对图片进行描述，这样屏幕阅读器就不需要进行解释了。

让 SVG 具有超级可访问性的另一个好处是，你还可以优化它们的搜索功能。

关于 SVG 的常见问题

如果您仍然对 SVGs 感到好奇，没关系。我们还有更多知识要分享。以下是我们可能遗漏的一些问题的快速汇总：

如何将 SVG 转换为 JPEG？

您可以使用桌面矢量编辑器或 CloudConvert 等在线工具快速完成转换。

能否直接在文本编辑器中编辑 SVG？

可以！SVG 基于 XML，因此您可以直接修改其代码。

SVG 比 PNG 清晰吗？

大多数情况下是的。如果尝试放大 PNG 文件，这一点尤其明显。

能否使用 JavaScript 编辑 SVG？

可以。这对于根据用户输入进行动态更改非常有用。

所有浏览器都支持 SVGs 吗？

所有现代网络浏览器都支持 SVGs，包括 Chrome、Firefox、Safari 和 Edge。

小结

调整您的网站以使用SVG文件比您想象的要容易得多。真正的挑战在于从头开始设计SVG或选择正确的图像以转换为格式。幸运的是，您可以使用许多工具来完成这两项工作。

一些不错的选择包括Adobe Illustrator、InDesign和GIMP。使用这些工具，您可以创建现有图像并将其转换为SVG。如果您使用的是WordPress，则可以使用Safe SVG插件上传这些SVG，然后享受动画制作的乐趣。