如何在WordPress中添加SVG图像文件(3个简单解决方案)

10/04/2022

什么是SVG?

SVG,全称可缩放矢量图形(Scalable Vector Graphics),是一种使用XML标记语言定义矢量图形的文件格式。SVG的主要优点是放大图像时不会丢失质量或产生像素化。

SVG如何工作?

可缩放矢量图形(SVG)是一种使用XML显示二维图形的技术。与常用的图像格式如PNG, GIF或JPG不同,如果你放大PNG或JPG图像文件,你会注意到图像开始模糊和像素化。

矢量图形不使用像素,而是使用二维地图将你看到的图像定义为坐标。放大时,由于图像不能像素化,因此不会失去质量。最重要的是,SVG图像的文件大小可以比PNG或JPG文件小得多,使它们成为图像格式的理想选择。通常,矢量图像用于图标、字体图标、网站标志和品牌图像。你可能希望将SVG文件添加到WordPress中用于你公司的标志、图标或其他图形。

尽管它们听起来很酷,但SVG文件可能有点不安全,因此WordPress默认不支持上传SVG文件。如果你在WordPress中上传SVG图像,将看到以下错误消息:对不起,出于安全原因不允许这种文件类型。

WordPress中SVG的安全问题

SVG文件包含类似于HTML的XML标记语言代码。浏览器或SVG编辑软件会解析XML标记语言,并在屏幕上显示输出。然而,这可能会使你的网站面临XML漏洞的风险,比如未经授权访问用户数据、触发暴力攻击或跨站脚本攻击。

本文章将分享的一些方法试图通过消毒SVG文件来提升其安全性。然而,这些插件无法完全防止恶意代码的上传或注入。最佳解决方案是只使用来自可靠来源的SVG文件,并仅允许信任的用户上传SVG文件。欲了解更多关于安全的信息,可查看我们的完整WordPress安全指南。

在WordPress中使用SVG的三种简单方法

方法一:使用WPCode允许SVG文件(推荐)

通过使用WPCode(最强大的代码片段插件),可以最简单和最安全地允许SVG上传到WordPress。WPCode带有大型库的预配置代码片段,可以在你的网站上替换许多单用途插件,如禁用附件页面、使用经典帖子编辑器或允许SVG文件上传。首先,需要安装并激活免费的WPCode插件。

激活后,导航到代码片段 » 添加片段。只需搜索“svg”,然后悬停鼠标在“允许SVG文件上传”上。然后点击“使用片段”。接下来,你将进入“编辑片段”页面,WPCode已配置了运行代码所需的所有设置。只需点击“激活”开关,然后按“更新”按钮。现在你将能够上传SVG文件而不会收到WordPress的错误或警告信息。

方法二:使用SVG Support插件上传SVG文件

此方法使用SVG Support插件,允许你在WordPress帖子和页面中显示内联SVG,并控制谁有权限上传它们。首先,需要安装并激活SVG Support插件。激活后,访问设置 » SVG支持页面配置插件设置。勾选“仅限管理员”的选项,这将仅允许站点管理员上传SVG文件。

方法三:使用Safe SVG插件上传SVG文件

此方法使用Safe SVG插件,允许你对上传到WordPress的SVG文件进行消毒。首先需要安装并激活Safe SVG插件。插件开箱即用,无需配置任何设置。唯一的不足是,该插件允许所有有撰写权限的用户上传SVG文件。若要控制谁能上传文件,需要购买插件的高级版。

希望这篇文章帮助你学习如何安全地在WordPress中添加SVG文件。你也许还想看看我们的文章,了解如何修复WordPress中最常见的图像问题以及最佳SEO插件和工具。如果你喜欢这篇文章,请订阅我们的YouTube频道获取WordPress视频教程。你也可以在TwitterFacebook上找到我们。



Related Posts

  • 2024-08-04
  • WordPress 教学

不喜欢 WordPress 4.3 引入的格式化快捷键?觉得有点烦人?最近,有用户问我们如何在 WordPress 中禁用视觉编辑器格式化快捷键。在本文中,我们将向您展示如何做到这一点。

閱讀更多
  • 2024-07-31
  • WordPress 教学

你在 WordPress 网站上看到 503 服务不可用错误吗?503 错误是因为服务器无法处理请求,通常是由于服务器过载或维护。而这个错误不会告诉你具体原因,这对于初学者来说非常令人沮丧。本文将向你展示如何修复 WordPress 中的 503 服务不可用错误。

閱讀更多
  • 2024-07-30
  • WordPress 教学

管理一个企业需要大量的工作。如果您无法正确维护您的 WordPress 网站,可能会迅速看到流量和销售额下降的现象。幸运的是,您可以聘请虚拟助手 (VA) 来帮助管理您的网站。本文将教您如何聘请 WordPress 虚拟助手,以便您可以专注于业务中最重要的活动。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>