如何在 WordPress 网站上传 SVG 格式图像

什么是 SVG？

SVG 的英文全称是 Scalable Vector Graphics ，意为可缩放矢量图形，是一种基于 XML 文本的矢量图形图像格式。如今，国内外很多主流浏览器都支持 SVG 格式，比如谷歌（Chrome）浏览器、火狐（Firefox）浏览器、苹果（Safari）浏览器、QQ浏览器、UC浏览器和百度浏览器等等。

SVG 是如何工作的？

SVG 格式利用 XML 生成二维矢量图，与 JPG 和 PNG 不同，矢量图形不包含像素，它可以像代码一样搜索、索引、编写脚本、编辑和压缩。因此，任何人都可以使用文本编辑器或矢量图形软件来创建它们。

WordPress 是否支持 SVG？

默认情况下，WordPress 是不支持 SVG 格式图像的，如果尝试将其上传，系统会提示由于存在安全风险，该文件格式不受支持。

将 SVG 图像上传到 WordPress 网站时，会出现如下所示的错误消息：

为什么在 WordPress 上使用 SVG 图像？

使用 SVG 文件的好处：

• 可扩展性 — 由于 SVG 是一种矢量图像格式，SVG 文件在所有屏幕分辨率下，都能保持相同的图像质量。
• 更小的文件大小 — 因为 SVG 文件占用的存储空间更少，所以使用 SVG 格式图片可以提升页面的加载速度。
• 对 SEO 友好 — 相较于像素图片格式，SVG格式图片更容易被搜索引擎读取，所以对SEO也更加友好。
• 基于代码 —SVG 可使用文本编辑器，或矢量图形编辑软件进行修改。

将 SVG 文件上传到 WordPress 网站

要想在 WordPress 网站上传 SVG 格式图像，我们可以安装 SVG支持插件，或通过向当前主题中添加代码来实现。

安装 SVG 支持插件

在本教程中，我们将使用 SVG Support 插件。该插件可以免费试用，并且试用方法非常简单。

以下是设置 SVG 支持的步骤：

第 1 步：安装并激活 SVG Support 插件。

第 2 步：从 WordPress 仪表盘导航到设置-> SVG Support。

第 3 步：选中只给予管理员上传 SVG 格式权限。

第 4 步：保存设置，便可以将 SVG 文件上传到媒体库了。

手动添加支持代码

如果不想安装插件，我们也可以编辑 WordPress 网站的 functions.php 文件。

通过 FileZilla 或者 Xftp 之类的 FTP 工具连接到网站服务器。

第 1 步：导航到当前主题文件夹。

第 2 步：找到当前主题的 functions.php 文件。

第 3 步：将以下代码片段添加到 functions.php 文件：

//add SVG to allowed file uploads
function add_file_types_to_uploads($file_types){
 
    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );
 
    return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

第 4 步：保存文件。如果是将其下载到本地进行编辑，需要将其覆盖上传。

第 5 步：尝试上传 SVG 格式的文件。