WordPress 支持多种图像格式，包括 .jpg、.jpeg、.png 和 .gif。但是，它不允许您使用可缩放矢量图形 (SVG)，这是最灵活的图像类型之一。幸运的是，学习如何将 SVG 添加到 WordPress 非常简单。
要启用这种图像格式，您只需要调整几个文件。之后，您将能够在您的内容中将 SVG 用作常规图像、徽标等。此外，一旦启用文件类型，WordPress 就可以与 SVG 完美配合。
在本文中，我们将讨论什么是 SVG 以及它们为何如此有用。然后我们将教您如何使用两种不同的方法将 SVG 添加到 WordPress，并解释如何使用 CSS 为它们制作动画。开始吧！
什么是可缩放矢量图形 (SVG)（以及它们为何有益）
SVG（如 Freepik 中的这些）非常适合没有太多复杂元素（例如图标）的简单图像。
SVG 本身不是图像格式。事实上，它实际上是一种标记语言，用于创建由矢量构成的二维图像。这在理论上听起来可能很复杂，但在实践中，您将在与任何其他图像相同的情况下使用 SVG。
这很重要，因为 SVG 比 PNG 和 JPG 等更常见的图像类型有一些优势。例如：
- 它们占用的空间更少。 SVG 由矢量组成，而不是像素。因此，您的图片会更轻，这有助于您的网站加载速度更快。
- 您可以轻松扩展它们。您可能知道在普通图像开始看起来很糟糕之前可以将其拉伸多远。 SVG 不是这种情况，因为可以按比例放大或缩小矢量而不会降低质量（或改变文件大小）。
- 您可以使用 CSS 为 SVG 设置动画。可以使用 CSS 动画矢量，它可以产生一些独特的效果（我们稍后会详细讨论）。
如果您没有设计背景，创建自己的 SVG 可能会很困难。但是，您始终可以查找 SVG 库存图像，或者询问您的设计师是否可以以该格式复制您网站的某些元素。
请记住，图像越复杂，使用矢量复制它就越困难。换句话说，SVG 是徽标和图标等简单图形的良好替代品，但它不适用于照片。
如何将 SVG 添加到 WordPress（两种简单的方法）
正如我们之前提到的，WordPress 不支持开箱即用的 SVG。但是，您可以手动启用此功能，或使用插件来启用此功能。让我们从后一种方法开始，因为它是最简单的。
方法 1：使用 SVG 支持插件
如果您正在寻找将 SVG 添加到 WordPress 的最快方法，这就是它。我们将使用支持这种特定图像格式的 SVG 支持插件，并将对它的支持添加到您的媒体库中：
过程很简单。您只需像往常一样安装并激活插件，然后就可以将 SVG 添加到您的 WordPress 站点。
WordPress 现在要求我们在上传 SVG 文件之前有
但是，根据您的需要，您可能还需要更改两个设置。首先，我们进入设置→SVG支持选项卡：
在里面，你会发现两个选项。第一个打开插件的高级模式，允许您使用 CSS 定位 SVG。如果您不想为 SVG 设置动画，则可以跳过此选项。
其次，您还可以通过启用限制管理员来限制将 SVG 上传到管理员的能力？特征。那取决于你！
方法二：修改站点的functions.php文件
每个WordPress站点都有自己的functions.php文件。这个基本组件包括重要的功能、类和过滤器。这也是通过几行代码向 WordPress 添加 SVG 支持的门票。
要访问此文件，您需要通过 FTP 访问您的网站。如果您没有客户端，我们建议您使用 FileZilla。找到您的 FTP 凭据并访问您的网站后，您需要前往您的根文件夹，通常称为 public_html 或在您的网站之后：
现在进入wp-includes文件夹，寻找里面的functions.php文件。需要注意的是这是父文件，而每个主题还有一个单独的functions.php文件：
对于这个例子，我们将代码添加到父文件中。但是，您可能会发现在更新 WordPress 时您的更改丢失了，因此请按照您更熟悉的方法将它们添加到您的主题特定的 functions.php 文件中。
（编者注：在主题的函数文件中执行此操作实际上是推荐的方法。）
现在通过右键单击 functions.php 文件并选择查看/编辑来访问它选项。这将使用您的默认文本编辑器打开它。现在，滚动到底部并将这段代码粘贴到那里：
function add_file_types_to_uploads($file_types) { $new_filetypes = array(); $new_filetypes('svg') = '图像/svg+xml' ; $file_types = array_merge($file_types, $new_filetypes);返回 $file_types； } add_action('upload_mimes', 'add_file_types_to_uploads');
保存对文件的更改并关闭它。然后，您可以返回仪表板并通过将 SVG 文件上传到媒体库来测试新功能，它应该可以顺利运行！
使用 CSS 为 SVG 图像设置动画
为 SVG 设置动画是一个有点复杂的过程，特别是如果您没有使用 CSS 的经验。但是，此功能可以帮助您创建重量很轻的简单动画，尤其是与 GIF 相比。另外，您可以根据需要放大或缩小动画 SVG，这（同样）是 GIF 无法做到的。
如果您想了解更多有关如何使用 CSS 制作 SVG 动画的信息，您可以找到在线教程来指导您完成该过程的基础知识。此外，如果需要，您可以查看一些您可以创建的示例。
结论
SVG 是您可以在网站上使用的最有趣的图像类型之一。它们的可扩展性不仅使它们成为响应式网站的不错选择，而且您还可以为它们制作动画，以便在某些情况下它们可以用作 GIF 的替代品。另外，在 WordPress 中启用它们真的很容易。
只需选择以下方法之一将 SVG 添加到 WordPress，您可以根据您的内容使用文件类型：
- 如果您不想使用代码，使用 SVG 支持插件。
- 如果您不想安装额外的插件，请修改您的 functions.php 文件以添加对 SVG 的支持。
您对如何将 SVG 添加到 WordPress 有任何疑问吗？在下面的评论部分提问！
