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

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

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

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

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

Scalability – SVGs are vector files. That means you can zoom in, enlarge, or shrink them without losing quality for logos, icons, or responsive designs. If you need to convert existing graphics into a scalable format, an SVG image converter can help turn compatible raster images into SVG files while preserving their visual quality. This can be especially useful for logos, icons, and other graphics that need to remain sharp across different screen sizes.

轻量级且对搜索引擎友好 – 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 的全部潜力，它们是轻量级、可搜索和可适应的。. 

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