可缩放矢量图形 (SVG) 图像格式指南

您无法摆脱互联网的一个方面：图像。 在网络的早期，这是一个严格的、纯文本的事情。 但是，我们现在有专门的图像格式来帮助我们显示清晰的视觉效果。 可缩放矢量图形 (SVG) 格式是可用的最新和最灵活的格式之一。

我们稍后会详细解释，但 SVG 是在前端显示为图像的数据集合。 这意味着您可以使用级联样式表 (CSS) 来操作图像。 更重要的是，您可以根据需要调整它的大小而不会降低质量。

在这篇文章中，我们将更多地讨论可缩放矢量图形以及它们如何为您提供帮助。 我们还将讨论如何将它们包含在您的 WordPress 网站上。

最常见 Web 图像格式的快速入门

在我们讨论 SVG 以及如何使用它们之前，有必要谈谈我们用于 Web 的主要图像格式。 有三点需要注意：

• 联合图像专家组 (JPEG)。 顾名思义，如果您想显示用数码相机拍摄的照片，这是适合您的格式。
• 便携式网络图形 (PNG)。 您需要使用 PNG 格式来显示任何创建的图形，例如来自 Adob​​e Illustrator 的图形。
• 图形交换格式 (GIF)。 嘿，每个人都喜欢有趣的电视节目片段，用作社交媒体上的反应！ GIF 是可移植的动画图形的完美格式。

虽然有些人会选择他们喜欢的任何格式，但这不会是最佳方法。 例如，如果您选择将每张图像制作成 GIF，您可能会看到天文数字的文件大小和低质量的视觉效果。 相反，您不会希望将 JPEGS 用于图形，因为 PNG 是一种更理想的格式。

什么是可缩放矢量图形格式

您将希望在本节中与我们一起忍受，因为我们将在某些领域获得技术。 此外，SVG 的概念可能会令人困惑。

可缩放矢量图形不存在（有点）。 事实上，它们根本不是图形或图像，而是可扩展标记语言 (XML) 的一种形式。 对于不知情的人，这是与 HTML 的近亲，但没有该语言的某些方面（例如预定义的标签）。

作为一个你可能已经理解的比较，考虑如何使用 CSS 创建形状。 这是我们稍后将讨论的更多内容。 好吧，想象一下这个 CSS 被烘焙到一个文档包装器中，您使用标准文件格式和结构（例如image.svg ）调用它。

更准确地说，由于 HTML 提供了定义标题、段落、部分、列表等的框架，SVG 提供了定义形状（例如圆形和矩形）的框架。 然而，这仍然不能解释为什么我们有（有时需要）SVG 格式。 我们接下来会谈到这个。

为什么我们有 SVG

在 SVG 之前，您将使用 PNG 来显示图形。 网络上的早期图像可能是 GIF，但一般来说，PNG 是主要的图像格式。 问题不是：“为什么我们有 SVG？”，更多的是“当前的图像格式缺少 SVG 可以解决的问题？” 答案是：活力。

如果您回顾一下主要的网络图像格式，有两种格式并不适合创建的图形（JPEG 和 GIF）。 这让 PNG 承受压力。 然而，PNG 存在一些现在才在现代网络中显而易见的问题：

• 它们是静态的，因为您可以离线创建图像，并将其导出为特定格式。 这意味着它有些不灵活。
• 通过扩展，您无法更改图像的“化妆”。 鉴于我们要创建和显示许多设备，您有时需要适应这些“视口”。 努力为使用 PNG 的台式机和主要移动设备创建所有徽标尺寸。
• 虽然 PNG 可能很轻，但设计师和网站所有者有责任确保进行图像优化。 PNG 可能很重，有时超过一兆字节，没有任何优化。

此外，PNG 填补了部分空白，当时很少有选项可以提供足够高的图像质量。 那时，CSS 还处于起步阶段，我们还没有现在所做的设计和开发范围。

例如，自 2010 年以来，我们只能使用border-radius属性。这使您可以定义圆形边缘甚至圆形。 你会在很多按钮上看到它的作用：

您将使用 CSS 来创建可以缩放并适应屏幕的形状，但可缩放矢量图形可以做得更多。 实际上，您现在将使用 SVG 而不是 CSS 来执行此操作，尽管它们也不是灵丹妙药。

可缩放矢量图形的优点

就像所有其他图像格式一样，可缩放矢量图形并不完美。 当然，有很多积极的方面：

• SVG 适合设备的尺寸，通常无需您进一步干预。 这减少了您的开发或创建时间。
• 图像的关联文件很小，因为您只需要一个 SVG。 相比之下，PNG 徽标需要提供几种不同的尺寸和尺寸。 这会占用服务器空间。
• 更重要的是，SVG 比 PNG 的性能更高，因为您只需要以千字节为代价加载一个文件。 该 PNG 文件包可能以兆字节为单位，具体取决于它们的质量、数量和优化。

总体而言，您可以使用 SVG 做的事情比任何其他图像格式都多。 开发人员和图形设计师都可以创建 SVG - 通过代码或从专用绘图应用程序导出典型创建。 因为它们更紧密地与网络的发展联系在一起，所以采用率正在增加。

可缩放矢量图形的缺点

然而，并非一切都是美好的。 SVG 仍然有一些您需要注意的问题：

• 与大多数其他核心网络方面不同，该技术正在发展。 因为许多人对 Scalable Vector Graphics 的期望很高，所以在您可以做的事情和您想做的事情之间存在“差距”。
• 虽然大多数浏览器都提供基本的 SVG 支持，但仍无法使用完整的功能集，具体取决于您使用的浏览器。 同样，SVG 具有更多尚未显现的潜力：我们需要更好的浏览器支持来获得更高级的功能，以了解该格式的功能。
• 在某些情况下，您可能会发现 SVG 图像不太准确或看起来完全不正确。 这是因为您必须像您期望的那样依赖网站加载。 如果您还记得由于错误而不得不重新加载网页的时间，那么仅使用您的 SVG 图像来想象这种情况。

我们还要说，在某些情况下，如果没有编码知识，创建 SVG 会更难。 在 Affinity Designer 和 Adob​​e Illustrator 等图形程序中有更好的支持。 Google Drawing 等应用程序也支持 SVG 导出：

这是一个改进的领域，但与其他图像格式相比仍然稍有落后。

尽管有这些缺点，但您可以减轻它们的影响。 当然，对于基本用法，您几乎可以立即实现它们。 事实上，WordPress 甚至通过几个步骤就提供了这种支持，我们将在接下来讨论这个问题。

如何在您的 WordPress 网站上使用 SVG

坏消息是，如果您想在不做任何工作的情况下将 SVG 上传到 WordPress，您将无法做到。 当前 Scalable Vector Graphics 支持的一个额外问题是，出于安全原因，WordPress 不允许您将这些图像作为标准上传：

原因超出了本文的范围。 简而言之，由于 SVG 格式是文档而不是实际图像，恶意用户可以构建潜在的脚本攻击。 这意味着您需要找到更安全的替代方案。

在 Web 的其他地方，您会看到向您的 functions.php 文件添加一些代码以启用 SVG 上传的说明。 但是，我们不会执行此步骤，因为我们无法保证它是安全的。 相反，你可以做你经常用 WordPress 做的事情：转向插件。 我们推荐 SVG 支持：

安装并激活插件后，前往 WordPress 中的设置 > SVG 支持屏幕。 这将显示几个屏幕，但您只需要勾选限制为管理员？ 设置面板中的复选框。

默认情况下，该插件将允许所有用户上传 SVG。 基于固有的安全问题，这可能是个坏消息，这正是 WordPress 不允许您首先上传这些文件的原因。 但是，如果您勾选此框，该插件将限制上传给站点管理员，同时使标准使用 SVG 更加​​安全。

总之

有很多方法可以在网络上显示图像，大多数人不会三思而后行他们使用的格式。 但是，如果您确实花时间将格式与需要相匹配，您将获得在所有屏幕上看起来都令人惊叹的详细而清晰的图像。

在这篇文章中，我们提供了很多关于可缩放矢量图形的信息。 您将使用 CSS 使图像适应您的需要，并且操作范围比 PNG 和 JPEG 大得多。 此外，它们重量轻——因此非常适合小屏幕和网络连接不佳的情况。

您想在您的网站上使用可缩放矢量图形吗？如果是，这篇文章会对您有所帮助吗？ 在下面的评论部分让我们知道！

图片来源：GDJ。