spot_img
HomeWordPress教程如何将 SVG 上传到 WordPress(安全方式)

如何将 SVG 上传到 WordPress(安全方式)

JasperAI 10000字免费额度试用

Web 管理员和 Web 设计师必然会在他们的工作中使用不同的媒体文件格式。 如今,最流行的格式之一是 SVG,这是一种基于 XML 的矢量格式。 遗憾的是,并非所有浏览器和平台都支持 SVG,您需要事先手动启用 SVG 支持。

本文将介绍使用 SVG 支持插件在 WordPress 网站上上传 SVG 文件的步骤。 我们还将回答一些有关此特定媒体文件格式的安全问题以及 SVG 为何值得使用的问题。

首先,让我们熟悉 SVG 及其工作原理。

如何将 SVG 上传到 WordPress(安全方式)

可缩放矢量图形 (SVG) 是一种基于 XML 文本的矢量图形图像格式。 虽然 JPG 和 PNG 等常见图像格式由大量称为像素的小方块组成,但这种格式依赖于 XML 标记语言来描述图像属性。

截至 2022 年 1 月,全球 42% 的网站使用 SVG。 自 2021 年 1 月以来,这一百分比有所增加,当时只有 29.4% 的网站使用它。 与 PNG 和 JPG 格式类似,SVG 在谷歌、维基百科和 YouTube 等高流量网站中很受欢迎。

谷歌SEO优化服务

SVG 的另一个优点是它得到了所有主要浏览器的广泛支持。 以下是支持 SVG 文件格式的浏览器列表:

浏览器 部分支持 全力支持
边缘 版本 12-18、79-96、97
火狐 版本 2 版本 3-94、95、96-97
安卓火狐 版本 95
铬合金 版本 4-96、97、98-100
安卓版Chrome 版本 96
苹果浏览器 版本 3.1 版本 3.2-15.1、15.2、TP
歌剧 版本 10-81、82
歌剧迷你 所有版本
手机歌剧 版本 12-12.1, 64
iOS 上的 Safari 版本 3.2-15.1、15.2
安卓浏览器 版本 3-4.3 版本 4.4-4.4.4, 96
安卓UC浏览器 版本 12.12
三星互联网 版本 4-14.0、15.0
QQ浏览器 版本 10.4
百度浏览器 版本 7.12
KaiOS 浏览器 版本 2.5

SVG 是如何工作的?

可缩放矢量图形利用 XML 生成二维矢量图形。 与 JPG 和 PNG 不同,矢量图形不包含像素。 相反,它们的行为在 XML 文本文件中描述。

因此,可以像代码一样搜索、索引、编写脚本、编辑和压缩可缩放矢量图形。 因此,任何人都可以使用文本编辑器或矢量图形软件创建它们。

WordPress 支持 SVG 吗?

WordPress 中默认不支持 SVG,因为它会带来安全风险——我们稍后将更深入地讨论围绕 SVG 的安全问题。

以下是将 SVG 图形上传到 WordPress 网站时出现的错误消息:

WordPress divi主题
当用户尝试将 SVG 文件上传到 WordPress 站点时出现的错误消息。

有一个关于使 SVG 成为 WordPress 核心功能的一部分的讨论。 在那之前,我们必须发挥创意并使用其他解决方案将 SVG 图像上传到 WordPress。

为什么使用 WordPress SVG?

简单和复杂 SVG 的比较。

尽管存在安全问题,但许多用户仍然使用这种图像格式,因为它有很多好处。 以下是使用 SVG 文件的一些优点:

  • 可扩展性 ‒ 由于 SVG 是一种矢量图像格式,因此 SVG 文件在所有屏幕分辨率下都保持相同的质量。 这种好处在放大后也会出现,这就是为什么许多人将这种可缩放图像格式用于图标和徽标的原因。
  • 较小的文件大小 ‒ 使用 SVG 文件可以更轻松地使用缩放图像提高网站性能,因为它们占用的网络存储空间更少,加载速度比光栅图像快得多。
  • 搜索引擎优化友好 ‒ 谷歌索引 SVG 文件,允许它们显示在谷歌图像搜索中并改进您的搜索引擎优化工作。 对于光栅图像,您仅限于优化它们的 alt 属性。
  • 基于代码 ‒ SVG 可使用文本编辑器或矢量图形编辑软件进行修改。 您可以为网站优化 SVG 图像文件,甚至可以添加动画以使图形具有交互性。

WordPress SVG 和安全性

由于 SVG 基本上是一个 XML 文本文件,它具有不影响其他图像格式的可利用漏洞。 因此,人们可以很容易地用恶意代码劫持它,对您的系统发起跨站点脚本 (XSS) 和 XML 外部实体 (XXE) 攻击。

因此,在处理 SVG 文件并将它们添加到 WordPress 时需要小心。

为了最大限度地降低安全风险,请确保在将 SVG 文件上传到 WordPress 媒体库之前对其进行清理。 此过程会删除可疑代码和错误,使图像对您的站点而言是安全的。

您可以使用 SVG 插件清理 SVG 文件上传——我们将在稍后介绍执行此操作的步骤。 但是,我们建议使用 SVG Sanitizer Test 对其进行双重消毒——这是 WordPress 开发人员 Darryll Doyle 开发的在线工具。

保护您的 WordPress 网站的另一种方法是将 SVG 上传限制为仅供受信任的用户使用。 选定的用户应该意识到围绕 SVG 格式的安全问题——这将阻止他们从可疑来源获取 SVG 文件。

如何使用 2 种安全方法将 SVG 文件上传到 WordPress

从技术上讲,有两种方法可以为 WordPress 添加 SVG 支持——使用插件或手动启用。 无论您的选择是什么,我们都强烈建议将上传权限限制为管理员和受信任的用户,以最大程度地减少恶意上传。

使用插件

在本教程中,我们将使用 SVG 支持。 这个插件使用一个 SVG sanitizer 库,它会在将 SVG 文件上传到媒体库时自动激活。 它也很容易设置和免费使用。

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

H10的年终大促
  1. 安装插件并激活它。
官方 WordPress 目录中的 SVG 支持插件。
  1. 导航 设置 -> SVG 支持 从您的 WordPress 仪表板。
从 WordPress 仪表板访问 SVG 支持。
  1. 选中旁边的框 仅限管理员 限制上传权限的选项。 对 启用高级模式 如果您想访问高级功能,例如内联 SVG 渲染和 CSS 样式,请选择该选项。
SVG 支持插件的设置。
  1. 保存更改后,您可以开始将 SVG 文件安全地上传到媒体库。

专家提示

如果启用高级模式,则​​内联呈现特色图像的选项将出现在使用 SVG 文件作为特色图像的 WordPress 帖子上。

手动添加 WordPress SVG 支持

此方法涉及编辑 函数.php 您的 WordPress 网站的文件。 因此,如果您熟悉 PHP 并且完全理解 SVG 安全问题,我们强烈建议您按照这些步骤操作。

以下步骤将解释如何通过 Hostinger 文件管理器在 WordPress 中手动启用 SVG。 也就是说,您也可以改用像 FileZilla 这样的 FTP 客户端。

  1. 访问 hPanel 并转到 文件 -> 文件管理器.
  2. 导航 public_html -> wp-包含. 向下滚动直到找到 函数.php.
通过 hPanel 的文件管理器访问 Functions.php。
  1. 双击该文件将其打开并将以下代码片段粘贴到其中:
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_filter('upload_mimes', 'add_file_types_to_uploads');
  1. 保存更改并尝试上传 SVG 文件类型。 如果过程成功,您的媒体库应该接受文件上传。

结论

SVG 文件的诸多优点促使这种文件类型越来越受欢迎。 不幸的是,XML 文本文件容易被代码注入,这是 WordPress 默认不包含 SVG 支持的主要原因。

也就是说,有两种方法可以让您的 WordPress 网站接受 SVG 文件——使用 WordPress 插件或修改网站的 函数.php 文件。 除了限制上传权限外,您还可以安全地将 SVG 文件上传到网站的媒体库。

我们希望本文能让您深入了解将 SVG 文件上传到 WordPress 网站的好处和风险。 祝你好运。

作者

Jordana 是一位数字营销和网络开发爱好者。 当她不在笔记本电脑前时,您可以看到她四处寻找最好的寿司。

5分钟生成10篇英文软文article forge软件试用
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES