在 WordPress 中使用 SVG 文件

已发表: 2020-11-18

如果您经常使用网站，您可能会遇到 SVG 文件，并且可能曾尝试在您的 WordPress 网站中使用 SVG 文件。 我们说“尝试过”，因为通常在 WordPress 中使用 SVG 文件可能会很棘手！ 在本文中，我们将了解 SVG 文件到底是什么，为什么要使用它们以及如何开始在您的 WordPress 网站上实现它们。

让我们开始吧！

什么是 SVG 文件？

SVG 代表“可缩放矢量图形”。 这些类型的图像文件不同于更常见的图像格式，如基于像素的 JPEG、PNG 和 GIF。 另一方面，SVG 图像是使用矢量以数学方式绘制的，因此属于称为“矢量图形”的一组图像。

您可能已经看到网站的图像看起来有颗粒感或像素化。 或者，也许您尝试放大 JPEG 文件（例如）并注意到您放大的越多，您的图像似乎变得越粗糙。 这确实令人沮丧，因为解决此问题的唯一方法是 a) 缩小或 b) 找到要使用的更高分辨率版本的图像。

SVG 文件与其他基于矢量的图形一样不会受到这种“像素化”问题的影响，因为图像的每个部分都是使用定义图像外观的二维映射创建的。 正因为如此，您可以无限缩放 SVG 文件，它们总是看起来清晰锐利。

这使它们成为网站的理想选择，因为用于查看图像的分辨率屏幕无关紧要——它总是看起来不错。

这种在不损失分辨率的情况下进行缩放的能力是用于图像的 SVG 文件在网站上越来越受欢迎的原因之一。 您经常会发现网站现在将其徽标上传为 SVG 文件，并且网站上的许多其他图形也以 SVG 格式添加。 而且，由于 SVG 文件是使用 XML 语言编码的，这意味着它们在技术上可以使用文本编辑器进行编辑，也可以很容易地被搜索引擎索引。

有很多值得喜欢的地方，但有什么缺点吗？

SVG 文件和 WordPress

SVG 文件确实有一个主要弱点……安全性。 SVG 文件在设计上实际上是不安全的，因此被 WordPress 视为“不安全”。 那么这是为什么呢？

SVG 文件实际上是以文档格式保存的，而不是图像格式。 因此，技术上可以将 JavaScript 嵌入到文件中。 然后，最终用户的浏览器可以执行此 JavaScript。 如果 JavaScript 本质上是恶意的，那显然是个坏消息。

还有更多的 SVG 漏洞。 浏览器必须解析 XML 标记才能显示矢量图形这一事实使其容易受到恶意使用，例如获取未经授权的用户日期的访问权、触发暴力攻击或跨脚本攻击。

使用 Pressidium 托管您的网站

60 天退款保证

查看我们的计划

从更平淡的角度来看，WordPress 中的所有用户都可以访问媒体库这一事实增加了不知道 SVG 文件可能带来的危险的人可能会将不安全的 SVG 文件上传到网站的风险。

正是由于这些问题，WordPress 默认不允许上传 SVG 文件。 除非您的服务器已配置为接受 SVG 文件，否则您在尝试将 SVG 文件上传到 WordPress 媒体库后可能会看到以下消息。

svg 文件 wordpress

如何在 WordPress 中使用 SVG 文件

请务必注意，SVG 文件和 WordPress 完全兼容。 默认情况下无法上传 SVG 文件的唯一真正原因是围绕这些类型的文件存在安全问题。

因此，只要您了解使用 SVG 文件的安全隐患并进行适当的检查以确保没有恶意代码上传到您的 WordPress 网站，那么您就可以在 WordPress 网站上自由使用 SVG 文件。

清理 SVG 文件

如前所述，确保上传到您网站的任何 SVG 文件不包含任何恶意代码非常重要。 为此，应首先对 SVG 文件进行“清理”。 最简单的方法是在您的 WordPress 网站上使用 SVG 插件（接下来会详细介绍），但是，如果您想手动执行此操作，您可以使用在线消毒剂，例如 WordPress 开发人员 Darryll Doyle 提供的 SVG Sanitizer Test .

将 SVG 文件内容上传到在线消毒剂，它将运行代码并生成一个很好的“消毒”版本。

现在准备好代码后，您可以通过代码片段将其直接插入 WordPress。

实际上，您可能会发现使用插件来处理 SVG 文件更容易，尤其是在您要使用大量此类文件的情况下。 幸运的是，有几个很好的选择。

安全 SVG

wordpress 的 svg 插件

Safe SVG 是 Darryll Doyle 开发的插件（他还创建了上面链接的 SVG Sanitizer 网站）。 被描述为“允许 SVG 上传的最佳方式”，该插件通过 a) 配置 WordPress 以允许 SVG 文件和 b) 在上传时清理您的 SVG 文件以确保它们可以安全使用，从而提供了二合一的功能。

安装并激活插件后，您可以直接上传 SVG 文件以在 WordPress 网站上使用。 如前所述，这些文件将在添加到媒体库之前进行清理，因此您不应冒任何无意中使您的网站感染恶意软件的风险。

该插件还有一个付费版本，它提供了一些与图像优化和用户上传限制相关的附加选项。

SVG 支持

wordpress 的 svg 插件

与安全 SVG 一样，SVG 支持允许您轻松安全地将 SVG 文件上传到您的媒体库，并像使用任何其他图像一样使用它们。

如果您安装/激活并转到管理菜单中的设置-> SVG 支持，您将找到它的设置，您还可以在其中限制仅向管理员上传，并通过启用高级模式以及一些打开来增强 SVG 文件的样式用于动画和优化 SVG 文件的源工具。

代码片段

如果您想在不使用插件的情况下启用 SVG 支持，您可以通过编辑活动主题的 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');

完成此操作后，您应该能够继续将 SVG 文件上传到媒体库。 请记住围绕 SVG 文件的安全问题，并确保首先清理文件。

SVG 和 CSS

如果您在网站上使用 SVG 文件作为徽标，它将直接作为 <img> 标签应用。

如果您通过 CSS 更改徽标文件的大小，您将看到图像如何缩放到您需要的大小。 我们当然夸大了下面演示中的大小（您不太可能想要这么大的日志！）但您明白了。

SVG 文件不仅可以用于徽标。 例如，您可以在网站页脚中使用 SVG 文件作为背景图像。 一些可用于实现此目的的演示代码如下所示（当然不要忘记更改图像的域和路径）。

 footer { background: url(http://YOURDOMAIN.com/wp-content/uploads/PATH-TO-YOUR-SVG/FILENAME.svg) no-repeat right; background-size: 240px; }

SVG 文件令人兴奋的地方在于，无论您需要多大或多小图像，它总是看起来清晰锐利。

如今，浏览器对 SVG 文件的支持非常普遍。 一个值得注意的例外是 Internet Explorer 8，但由于目前全球只有 0.3% 的用户运行它，因此它可能不是主要问题。

如果您正在努力在您的网站上通过 CSS 生成使用 SVG 文件的正确代码，请查看这个免费的 SVG URL 编码器。 这是一个很棒的工具，可以轻松地将您的 SVG 代码转换为 CSS 就绪，而您只需付出最少的努力。

结论

当您想确保网站上的图形清晰且无论在何种屏幕上查看时，SVG 都是一个很好的解决方案。 使用 SVG 插件时，在您的 WordPress 安装中启用它们很简单，并且在设计响应式网站时可以真正加快速度，因为一张图像可以在所有屏幕尺寸上使用。

SVG 文件的唯一缺点是它们带来的安全风险。 也就是说，使用对这些进行清理的插件可以大大降低风险，并且真的不应该让你停止使用它们。