如何在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

  • 2025-02-16
  • WordPress 教学

你是否想过,能不能用更引人注目的方式取代WooCommerce中基本的促销徽章?答案是肯定的!通过自定义产品徽章,你可以在在线商店中突出新产品、折扣商品或限时优惠。在这篇文章中,我们将展示给你两个简单的方法,使用强大的插件或添加简单代码来为你的WooCommerce商店添加自定义产品徽章。

閱讀更多
  • 2025-01-18
  • WordPress 教学

我们都知道推荐计划是强大的武器。但要找到真正的品牌代言者并不容易。许多计划吸引的只是想快速赚钱的人,导致非真实的推广,无法有效转化客户。幸好,作为 WooCommerce 商店的店主,您有一个巨大的优势:一群真正喜爱和使用您产品的内置客户群。通过将这些现有客户转化为推广合伙人,您可以释放真实口碑营销的力量。

閱讀更多
  • 2025-01-10
  • WordPress 教学

最近,我们的一位比利时读者在其在线商店中苦于销售增长缓慢。除了其他建议外,我们建议他们在网站上设置Bancontact支付。Bancontact是一种主要在比利时使用的流行支付系统,客户可以通过银行账户进行安全的实时支付。

閱讀更多

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