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

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

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

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

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

可扩展性 - SVG是矢量文件。这意味着您可以放大、缩小或调整它们的大小，而不会降低徽标、图标或响应式设计的品质。

轻量级和SEO友好

样式和动画

可访问性 - 正确设置后，SVG包含可访问的文本标签和角色，屏幕阅读器可以解释它们，这是使用它们的另一个可靠理由。

在WordPress中添加SVG的解决方案

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

1. 使用插件

a) WPCode + SVG 代码段

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

b) SVG支持插件

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

c) 其他选项

• SVG 安全
• SVG 支持清理
• 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 攻击
• XXE攻击（外部实体调用）。

最佳实践：

• 使用插件
• 通过在线工具进行清理（例如，Darryll Doyle的SVG Sanitizer Test）在上传之前。
• 限制SVG上传仅限管理员或受信任用户。

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

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

- 文件夹/子文件夹结构

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

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

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

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

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

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

无论您是内容创作者、设计师还是小型企业主，它都能在无需编写代码的情况下将强大的技术交到您的手中。您的网站将加载更快，排名更高，并且看起来令人惊艳！您还在等什么？点击 这里 获取您的专属副本。