如何在 WordPress 中添加 SVG 图像文件

准备好为您的 WordPress 网站进行重大图形升级了吗？想象一下无限可缩放的徽标和图标，在任何设备上看起来都很清晰，没有像素化，没有失真。本指南向您展示如何使用 WP Media Folder在 WordPress 中上传和管理 SVG 文件，它适用于任何人，即使您不是开发人员。.

在本逐步教程中，我们将解析SVG文件的好处，为什么设计师喜欢它们，以及为什么它们对SEO和页面性能非常出色。您将学习多种易于遵循的方法来启用SVG上传：从使用可信插件到简单的代码调整，以及保持网站安全的智能策略。.

我们将使用 WP Media Folder，JoomUnited出品的强大的媒体管理插件。. 

为什么SVG对可缩放图形来说很棒

可扩展性 ——SVG 是矢量文件。这意味着您可以放大、缩放它们而不会损失质量，适用于徽标、图标或响应式设计。

轻量级且对搜索引擎友好 – SVG 文件通常比栅格图像小，并且是基于文本的 XML，因此搜索引擎可以直接读取关键元素（替代文本、标题等）。

样式和动画 ——您可以通过 CSS 或 JavaScript 来操控 SVG。想要添加悬停效果或动画？很简单。

可访问性 ——如果设置得当，SVG 包含屏幕阅读器可以解释的可访问文本标签和角色，这是使用它们的另一个充分理由。

在WordPress中添加SVG的解决方案

由于安全风险（SVG是XML，可能包含恶意代码），WordPress默认阻止SVG。然而，有三种可靠的方法可以启用SVG支持：

1. 使用插件

 a) WPCode + SVG 代码段

• 安装免费的 WPCode 插件。.
• 从其库中添加“允许SVG文件上传”代码段并激活它。.
• 默认情况下，只有管理员可以上传SVG。.

 b) SVG支持插件

• 通过插件 > 添加新安装“SVG支持”，并激活它。.
• 在其设置中，选中“限制为管理员”和/或“启用高级模式”（内联渲染，CSS样式）。.
• 通过媒体 > 添加新上传您的SVG或拖放。.

c) 其他选项：

• SVG 安全 由 Darrell Doyle 提供，旧但仍在使用。
• SVG 支持清理 上传以防止 XSS/XXE 风险。
• HappyFiles/CatFolders 添加SVG上传功能，并具有清理和预览功能。

2. 将代码片段添加到functions.php

您可以使用以下代码： 

function enable_svg_upload($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'enable_svg_upload'); 

位置： 主题的 functions.php 文件（务必使用子主题！）。

缺点： 默认情况下不进行消毒——除非配合消毒程序使用，否则存在风险。而且上传权限仅限管理员（您可以自定义此设置）。

3. 安全考虑

 SVG = XML，可以包含：

• XSS 攻击 （JavaScript）。
• XXE攻击 （外部实体调用）。

最佳实践：

• 使用 SVG Support、SVG Safe、HappyFiles 等内置清理功能的插件。
• 请使用在线工具 （例如 Darryll Doyle 的 SVG 消毒测试）进行消毒。
• 限制SVG上传 仅限管理员或受信任用户。

WP Media Folder 以及为什么它对 WordPress 上的 SVG 很重要

WP Media Folder 是一个强大的媒体库管理器

- 文件夹/子文件夹结构

-高级过滤器，排序，拖放

 - 重命名，水印，批量替换，预览，下载

兼容许多工具，如页面构建器、WooCommerce 和 WPML。.

虽然 WP Media Folder 本身不允许使用 SVG 文件，但它允许我们组织、维护和管理包括 SVG 文件在内的任何类型的文件。.

总结：使用SVG和 WP Media Folder提升您的网站

停止与杂乱的媒体文件夹和未优化的图像文件作斗争。相反，利用 WP Media Folder的直观组织工具，释放 SVG 的全部潜力，它们是轻量级、可搜索和可适应的。. 

无论您是内容创作者、设计师还是小型企业主，它都能让您无需编写任何代码即可掌握强大的技术。您的网站加载速度更快、排名更高、外观更惊艳！还在等什么？点击 此处 获取您的专属版本。