在 WordPress 中启用 SVG 支持

已发表: 2023-02-12

WordPress 允许用户上传多种不同类型的图像文件。 您可能会认出常见的可疑对象，例如 PNG 和 JPG。 显示其他文件类型（例如矢量图形）可能会出现更多问题。

幸运的是，有几种方法可以将矢量文件合并到您的网站中。 虽然不是本机功能，但可缩放矢量图形 (SVG) 文件可用于在 WordPress 网站上显示二维图像。 通过稍微重新配置，您将能够使用此文件类型优化您的一些徽标和其他图形。

注意：如果您使用 WP Engine 托管，我们本机支持对 SVG 文件进行 GZIP 压缩。

在本文中，我们将详细了解什么是 SVG 文件以及您可能想要使用它们的原因。 然后，我们将通过两种方式在您的网站上启用它们。 我们还将介绍您可能想要采取的一些重要安全预防措施。 让我们开始吧！

目录
1.什么是 SVG？
2.为什么使用 SVG？
3.如何将 SVG 上传到 WordPress
3.1. 方法一：使用插件
3.1.1. 第 1 步：下载插件
3.1.2. 第 2 步：在您的服务器上启用 SVG 文件的 GZip 支持
3.1.3. 第 3 步：确保插件正确保护文件
3.2. 方法 2：手动启用 SVG 文件上传
3.2.1. 第 1 步：编辑站点的 Functions.php 文件
3.2.2. 第 2 步：添加代码片段
3.2.3. 第 3 步：安全访问并限制 SVG 上传权限
4.使用 WP Engine 保持安全

什么是 SVG？

SVG 文件是一种矢量图像。 矢量文件的组成不同于更常见的图像文件类型。 例如，JPG 由数千个像素组成。 另一方面，对于 SVG 文件，情况并非如此。

矢量图像更像是一组书面说明。 它们不包含形成更大图像的像素。 相反，它们包含一组类似模式的数据，可创建二维图像。 这意味着使用 SVG 文件有一些独特的好处。

为什么使用 SVG？

SVG 有很多好处。 由于它们具有高度可扩展性，您可以根据需要调整大小而不会影响图像质量。 您可能非常了解，如果您尝试放大 JPG 的大小，质量会很快下降到无法使用的水平。

这就是 SVG 可以派上用场的地方。 虽然它们不适用于显示传统照片，但它们是您网站上的企业徽标、图标和其他简单图形的绝佳选择。

此外，SVG 文件往往比其他图像类型小得多。 这意味着您的网站不会因图形而陷入困境。 更重要的是，SVG 文件已被谷歌索引，并且已经有一段时间了。 这对您网站的搜索引擎优化 (SEO) 来说是一个真正的福音。

如何将 SVG 上传到 WordPress

由于 WordPress 不包含开箱即用的 SVG 支持，因此您需要更加努力才能将它们包含在您的网站上。 在接下来的几节中，我们将介绍如何使用插件和手动过程将 SVG 文件添加到您的网站。

方法一：使用插件

与许多 WordPress 任务一样，插件可以使启用 SVG 支持变得简单。 您所要做的就是选择正确的工具并配置一些设置。

第 1 步：下载插件

首先，您需要下载并安装一个 SVG 插件。 我们推荐 SVG 支持：

安装并激活插件后，您将在 WordPress 仪表板中的设置 > SVG 支持下有一个新的菜单选项。 在那里，您将收到有关如何为您的网站设置 SVG 文件样式的说明：

此外，您还可以配置一些重要的管理设置。 这包括将 SVG 上传权限仅限于管理员：

之后，您将能够将 SVG 文件直接上传到您的媒体库。 但是，还有一些其他重要项目需要首先处理。

第 2 步：在您的服务器上启用 SVG 文件的 GZip 支持

您如何处理此步骤将取决于您的 Web 主机和服务器设置。 例如，在 WP Engine 中，GZip 已经为特定的文件类型列表启用。 话虽如此，“image/svg+xml”不是其中之一。

将此类型添加到您网站的列表中将确保您的 SVG 文件得到适当且快速的优化。 您需要将此文件类型包含在您的.htaccess文件中，以便一切顺利运行。

第 3 步：确保插件正确保护文件

使用 SVG 文件的缺点之一，也是这种文件类型尚未合并到 WordPress 核心的主要原因，是由于安全问题。 由于 SVG 文件是基于 XML 的，因此它们容易受到外部实体攻击以及其他风险。

当您配置 SVG 插件时，建议您将 SVG 上传权限限制为仅限管理员。 但是，更安全的方法是在上传 SVG 文件之前对其进行“清理”。 这消除了任何可能使您的站点容易受到攻击的不必要的 XML 代码。

SVG Support 插件不包括自动清理，但有其他插件可以。 安全 SVG 就是其中之一：

或者，您也可以安装自己的消毒剂并独立使用。 Safe SVG 的创建者在 GitHub 上提供了插件的清理代码，供任何人使用。

如果您计划使用下一种方法在您的 WordPress 网站上启用 SVG，那么拥有自己的消毒剂也是一个不错的选择。

方法 2：手动启用 SVG 文件上传

如果您更喜欢亲自动手而不是使用插件，您可以手动启用您的 WordPress 网站以接受 SVG 文件。 接下来，我们将看看这个过程是如何工作的。

第 1 步：编辑站点的 Functions.php 文件

首先，您需要编辑网站的functions.php文件。 为此，您可以转到仪表板中的外观 > 编辑主题，然后选择functions.php文件：

或者，您可以使用文件传输协议 (FTP) 应用程序（例如 FileZilla）访问您站点的文件。

无论哪种方式，最好在您的网站上进行任何主要工作之前创建子主题或切换到开发环境。 这将在您进行更改时保护您的实时站点免受伤害。

第 2 步：添加代码片段

接下来，您需要将以下代码片段添加到您的functions.php文件中：

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

之后，您将能够将 SVG 图像上传到您的媒体库。 在那里，您可以像查看其他图像文件类型一样查看它们并与之交互。

第 3 步：安全访问并限制 SVG 上传权限

正如我们前面提到的，启用 SVG 文件确实存在一定的风险。 为了确保您的站点安全，您可以通过创建自定义用户角色来设置 SVG 的上传权限。 您可以使用诸如用户角色编辑器或 WPFront 用户角色编辑器之类的插件来完成此操作。

这些插件使您能够自定义现有用户角色的访问和权限级别。 换句话说，他们会让您指定哪些用户有权上传 SVG。 这将帮助您密切关注这些文件的安全性。

使用 WP Engine 保持安全

WordPress 本身不允许使用 SVG 文件。 这很不幸，因为这些文件往往是显示徽标和其他图形的最佳选择。 好消息是，在我们最喜欢的一些开发人员资源的帮助下，您将能够在您的站点上启用和保护 SVG 文件的使用。

另外，请记住，在我们的 WordPress 托管计划中，您将获得专业支持和完善的网站安全解决方案。 立即与我们一起保护您的网站！