什么是 SVG 文件？ 5 件事要知道

已发表: 2021-11-17

什么是 SVG 文件？ 当您在设计一个尽可能用户友好的 WordPress 网站时，您可能会遇到一些图像问题； 特别是因为它与图像分辨率有关。 获得正确的图像质量很重要，因为在网页上看起来比扭曲和缩放不良的照片或徽标更业余的东西更少。

响应式设计要求只会进一步加剧我们在图像和可扩展性方面的问题。 网站用户正在各种不同的设备上查看您的内容。 正因为如此，您的图像必须针对每台设备进行全面优化。

在本文中，我们将了解如何拥有一种文件格式，无论 SVG 文件的大小如何，都可以轻松获得完美无瑕的图像。

好消息是有人已经这样做了。 这就是“什么是 SVG 文件？”这个问题的答案。 SVG 文件是 WordPress 网站上所有非摄影图像的完美解决方案。

SVG 文件将生成任何比例的完美清晰的图形，并针对所有搜索引擎进行了全面优化。

他们也是：

  • 文件大小比其他图像文件格式小
  • 可编程的
  • 能够制作动态动画

关于 SVG 文件，还有比你想象的更多的东西要解压。

什么是 SVG 文件

什么是 SVG 文件？

SVG 代表可缩放矢量图形文件。 它是一种用于在网络上呈现二维图像的文件类型。

与图像的其他标准文件格式不同，SVG 以矢量格式存储图像，该格式由基于数学公式的线、点、形状和曲线组成。

但究竟什么是矢量图形？

矢量与光栅

您在当今 Internet 上看到的图像可分为两个不同的类别：矢量图形和光栅图形。 毫无疑问，您已经熟悉 JPEG 和 PNG 图像文件。 这些都是作为光栅图形格式创建的。

光栅格式是指将图像信息存储在称为位图的网格中的图像文件。 位图中的各个方块组合起来向我们展示了可识别的图像，就像电视或计算机屏幕上的像素一样。

光栅图形最适合非常详细的照片图像，其中每个像素的确切颜色必须唯一指定。 这些图像类型具有固定的分辨率，这意味着当您增加图像大小时，图像质量会降低。

PDF 和 SVG 是矢量图形格式，它们的工作方式完全不同。 它们将图像存储为单个点和这些点之间的线。 数学公式用于确定线和点的形状和位置，同时在图像按比例缩小或放大时保持空间关系。

矢量图形能够存储颜色信息并可以显示文本。

SVG 文件如何工作？

SVG 文件总是用称为 XML 的代码编写的。 这是一种通用标记语言，用于传输和存储数字信息。 SVG 文件中的 XML 代码指定了几个重要的内容，包括：

  • 颜色
  • 形状
  • 图像中的文本

当 Web 浏览器（或任何其他应用程序）处理 SVG 文件时，它会接收 XML 信息，对其进行处理，然后将其作为矢量图像显示在用户的屏幕上。

使用 SVG 文件有什么好处？

SVG 文件不仅实用而且非常强大，可用于 WordPress 网页设计。 原因如下：

SVG 文件具有无限的可扩展性

SVG 文件可以调整为您想要的任何大小而不会丢失图像质量。 SVG 文件的大小无关紧要，因为无论它们在您的网站上显示的大小，它们看起来都是一样的。

这种可扩展性很重要。 毕竟，每次查看的图像大小都会有所不同，这取决于他们使用的设备、浏览器窗口的大小以及您的整体网站布局。

无论如何，您的 WordPress 网站图像必须完全呈现给您的所有用户。 为您的图像使用 SVG 文件可以更轻松地完成此操作。

当您需要扩展或缩小 SVG 文件的大小时，正在读取它的程序将重新调整线条和点，以便纯色和清晰的边界准确地保持在应有的位置。

相比之下，当光栅图像文件在用户屏幕上放大到更大尺寸时，它们看起来会像素化。 最终，光栅图像根本不是为有效缩放而设计的。

但是，需要权衡更好的可扩展性。 按照设计，SVG 文件缺乏光栅图像提供的更高质量和细节。 您只能在矢量系统中传达有限数量的视觉信息，而以光栅格式构建的文件将在位图允许的范围内尽可能详细地显示其图像。

请记住，将保存为 PNG 格式的详细照片转换为矢量的尝试将导致巨大且无法使用的 SVG 文件。

这意味着这两种图像文件类型在 WordPress 网页设计中都有独特的位置。 对照片使用 JPEG 和 PNG（或其他光栅格式），对细节较少的图像使用 SVG 文件。

设计定制

SVG 文件允许 WordPress 开发人员和设计人员更好地控制其网站的显示方式。 无需直接在文本编辑器中修改文件，只需使用与 SVG 兼容的众多编辑程序之一进行更改：

  • 颜色
  • 文本
  • 矢量形状
  • 视觉效果
  • 阴影和渐变

脚本兼容性

由万维网联盟开发，作为 Internet 图形的标准格式，SVG 文件旨在与其他 Web 约定进行良好的通信，例如：

  • CSS
  • HTML
  • JavaScript

由于这种设计兼容性，以 SVG 文件格式保存的图像可以使用脚本进行控制。 这为动态显示打开了大门，包括移动响应图像、动态图表和动画。

使用 PNG 或 JPEG 图像无法做到这一点。

可访问性和搜索引擎优化

SVG 文件是文本时间。 与 PNG、JPEG 和其他光栅图像格式相比，这为您提供了一些明显的优势。

首先，程序员能够查看 XML 代码并立即理解它。 但除此之外，当 SVG 文件包含文本时，文本信息将存储为文字文本（而不是形状）。 因此，屏幕阅读器可以解释 SVG 文件，这有助于无法以传统方式与数字内容交互的人。

但更重要的是，SVG 文件可以很容易地被 Go​​ogle 和其他搜索引擎索引。 通过在网页上放置包含大量文本（或其他 SVG 显示）的信息图，在图像中包含关键字将提高您的页面排名并推动您的 SEO。

在 SEO 可扩展性方面，JPEG 和 PNG 图像文件仅限于替代文本和元数据。

更易于管理的文件大小

SVG 能够比光栅格式更有效地存储您的图像，前提是您使用的图像没有过多的细节。

它们包含足够的信息来以任何比例显示矢量，而位图图像文件需要更大的文件大小来处理按比例放大的图像。

SVG 文件的小物理尺寸非常适合 WordPress 网站所有者，因为小图像文件在 Web 浏览器上的加载速度会更快。 当您使用比 JPEG 和 PNG 更多的 SVG 文件时，您将有助于提高网站的整体性能。

请记住，您不应将网站的所有图像都转换为 SVG 文件。 高度详细的照片应保留为 JPEG 或 PNG 格式。

您应该使用 SVG 文件做什么？

这些文件类型最适用于细节少于标准照片的图像。 让我们看看 SVG 图像文件最常见的在线用途。

图标

几乎所有图标都可以很好地转换为矢量图像，因为它们具有明确定义的边界，并且相对简单。

按钮等元素的图标也需要对各种屏幕的尺寸做出响应，这意味着它们需要可扩展。

网站标志

SVG 非常适合出现在您的网站标题、电子邮件和印刷品中的徽标。 徽标的设计通常非常简单，这使得它们非常适合 SVG 格式。

插图

非照片视觉艺术和矢量是天作之合。

当您将它们转换为 SVG 时，您网站上的这些类型的绘图将很容易缩放，同时节省文件空间。

界面元素和动画

当您利用 JavaScript 和 CSS 的功能时，您将能够设置 SVG 文件以动态更改外观。 它们可以在您选择的触发事件后自动触发或设置为更改。

动画 SVG 为您的网站添加了急需的视觉风格，或者可用于通过界面动画吸引用户。

数据可视化和信息图表

您的 WordPress 网站会受益于插图图表或信息图表等元素吗？ 也许您需要创建更好的 WordPress 特色图片以使您的网站更具影响力。

这是另一个非常适合 SVG 的应用程序。 设计将无缝扩展，每个 SVG 文件中的文本都是 100% 可索引的。

如何创建和编辑 SVG 文件

要打开任何 SVG 文件而不进行编辑，您只需直接在 Web 浏览器中打开它，因为每个浏览器都旨在完美地显示 SVG。 您还可以在编辑程序中预览 SVG 文件，我们稍后会介绍。

当您想修改 SVG 文件时，您可以在文本编辑器中进行。 但是，这对于进行颜色以外的更改是不切实际的。 相反，您应该使用专门的软件进行此编辑。

有高级和免费选项，包括：

  • Adobe 插画家
  • CorelDRAW
  • 微软视觉
  • GIMP (GNU Image Manipulation Program) – 这是流行的、免费的、完全开源的
  • 谷歌文档

要开始创建 SVG，您无需成为 XML 或编码方面的专家。 您需要做的就是在任何这些程序中绘制矢量，然后以 SVG 文件格式导出它们。

列出的每个程序都有自己的学习曲线和限制。 如果您计划进一步探索 SVG 文件，请尝试上述几个选项。 在您决定创建矢量的任何付费或免费选项之前，请先了解可用的工具。

这是如何使用 Adob​​e Illustrator 对图像进行矢量化的一个示例：

  1. 在 Adob​​e Illustrator 中创建您计划转换为 SVG 文件的独特设计。
  2. 在您的设计上单击“图像跟踪”以选择它。 在下拉菜单中，转到高级选项。 选择“大纲视图”以清楚地了解设计的边界并查看存在多少节点。
  3. 单击“扩展”将设计更改为矢量。
  4. 根据需要调整大小。
  5. 删除不需要的节点以微调设计。
  6. 在“魔术棒”工具中，单击“组选择”，然后将完成的设计与当前在画板上的任何其他设计分开。
  7. 选择您的设计后，单击文件 > 导出 > 导出为 SVG (*.SVG)。
  8. 在 SVG 选项中，单击“显示代码”以显示 XML。 复制并粘贴到您喜欢的位置。

SVG 文件非常适合按比例设计

什么是 SVG 文件？ 这是一个图像文件，在许多不同的 WordPress 网页设计场景中都非常方便。 无论您是需要放大您的徽标以贴在广告牌上还是将其缩小到缩略图大小，SVG 文件都将确保您不会丢失使您的徽标独一无二的细节。

包起来

SVG 文件是交互式的、多功能的，并且很容易使用您选择的图形编辑器和一点设计技巧开始创建。

使用 WordPress 网页设计工具包中的 SVG 文件，您将永远无需担心标准网站图像中那些恼人的模糊图形。

当然，对于您的高度详细的照片，最好坚持使用 JPEG 和 PNG。

获得奖励内容：建立业务所需的工具
点击这里