如何在 WordPress 中使用 SVG？

SVG 文件是一种矢量图形文件，可自由缩放大小而不影响画质。同时，SVG 格式的图片的大小比 PNG 或 GIF 更小。

但是在默认情况下，我们不能在 WordPress 中使用 SVG 格式文件。本文我们向您介绍如何在 WordPress 中启用这种类型的文件。

什么是 SVG？

SVG 是 XML 格式的结构化文本文档，其中图像通过使用线条、形状和属性来描述。而最常见的图像格式（如 GIF、JPG、PNG 或 WebP）被称为“光栅”，是通过像素来描述图像。而 SVG 改为使用文本。

通过 SVG 绘制一个简单的圆：

<svg viewBox="0 0 20 20" >
    <title>Estructura básica del SVG</title>
    <style>
        .circle {fill: blue}
    </style>
    <circle class="circle" cx="5" cy="5" r="5" />
</svg>

SVG 格式的优缺点

SVG 格式的优点

SVG 格式的优点很多，最主要的一点是，在缩放时不会丢失任何细节。

• 可以在不损失质量的情况下缩放 SVG 文件。它在所有屏幕分辨率下都保持相同的清晰度。
• 它们占用的网络存储空间更少，加载速度比使用像素的图像快得多。通过使用 SVG 格式文件，可以提升 WordPress网站加载速度。
• 可以使用任何文本编辑器对其进行编辑。
• 可以使用 CSS 样式在 SVG 文件中创建动画和视觉效果。
• SVG 文件接受 Javascript 代码。
• 可以使用外部 Javascript 代码调整 SVG。
• 它们以 Gzip 或 Brotli 格式压缩。
• 所有主要浏览器都支持它们。

SVG 格式的缺点

SVG 格式的一些缺点：

• 对于一些复杂的图像（例如照片），使用 SVG 格式的效果不佳。
• 使用 SVG 需要额外的安全措施。

由于 SVG 是文本文件，存在着被注入恶意代码的风险。因此，Wordpress 默认不支持 SVG 格式的文件。

在 WordPress 中使用 SVG 图像

在这里，我们介绍几种在 WordPress 中使用 SVG 图像的方法。第一种是通过安装 Safe SVG 插件的方式，第二种是通过添加代码的方式，第三种是通过代码为特定用户角色启用 SVG 图片。

方法一：通过 Safe SVG 插件启用 SVG

安装和激活 Safe SVG 插件，然后不需要行任何配置，就可以直接使用 SVG 文件了。

方法二：通过代码启用 SVG

要通过代码的方式，在 WordPress 中启用 SVG 图片，可以按照下面的方式进行操作：

第一步，找到主题或子主题的 functions.php 文件。

第二步，通过 sftp 工具连接服务器，然后找到并编辑 functions.php 文件。

第三步，接下来，将以下代码粘贴到 functions.php 文件的底部。

/**
 * Add svg to WordPress
 */
function add_file_types_to_uploads($mime_file_types){
    $mime_file_types['svg'] = 'image/svg+xml';
    return $mime_file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

方法三：通过代码为特定角色的用户启用 SVG

该方法与第二种方法类似，同样是编辑主题或子主题的 functions.php 文件。

然后将下面的代码添加到文件的底部。

/**
 * Add svg to WordPress admin users
 */
function add_file_types_to_uploads($mime_file_types){
    if (current_user_can('administrator') ){
        $mime_file_types['svg'] = 'image/svg+xml';
    }
    return $mime_file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

在该代码中，我们添加了一个条件。通过这样做，我们仅为 WordPress 管理员启用了 SVG 文件。