代码观察者

如何在 WordPress 中安全使用矢量图像

Rifat Divi Tutorials Nov 29, 2023

在Divi网站设计中添加自定义图形和插图确实有助于增强视觉吸引力。但找到合适的图像资产或聘请设计师并不总是可行的。幸运的是，Divi 可以让您轻松地在构建器中创建自己的矢量图像和插图。

如何在 WordPress 中安全使用矢量图像

在本指南中，我们将探讨如何在不损害您的网站的情况下实际实施 SVG。

即使您没有设计经验，您也可以制作专业、高质量的矢量图像，真正将您的 Divi 网站视觉效果提升到一个新的水平。

SVG 简介及其用途

SVG 代表可缩放矢量图形。它是一种广泛使用的基于 XML 的矢量图像格式，旨在描述二维矢量图形。与使用像素表示图像的光栅图像格式（例如 JPEG 或 PNG）不同，SVG 使用数学方程来定义形状、线条和颜色，使其成为与分辨率无关且高度可扩展的格式。

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始

以下是 SVG 在网站设计中的一些关键用途：

  1. 响应式图形： SVG 图像与分辨率无关，这意味着它们可以放大或缩小，而不会降低质量。这使得它们非常适合响应式网页设计，内容可以调整以适应不同的屏幕尺寸和分辨率。
  2. 图标和徽标： SVG 通常用于网站上的图标、徽标和其他图形元素。由于 SVG 文件尺寸较小，并且可以使用 CSS 和 JavaScript 轻松进行自定义和动画处理，因此它们是创建交互式且具有视觉吸引力的用户界面的流行选择。
  3. 视网膜和高 DPI 显示器： SVG 非常适合在视网膜显示器等高 DPI（每英寸点数）屏幕上显示清晰锐利的图形，传统的光栅图像在放大时可能会出现像素化。
  4. 动画： SVG 允许使用 CSS 动画等工具或 Snap.svg 和 GreenSock 动画平台 (GSAP) 等 JavaScript 库直接在 XML 代码中创建复杂的动画。这使得向网站添加动态和交互元素成为可能。
  5. 可访问性：屏幕阅读器和辅助技术可以轻松访问 SVG 图像，因为底层 XML 结构可以用描述性文本进行注释，从而使网站对残疾人更具包容性和可用性。
  6. SEO 优势：搜索引擎可以解析和索引 SVG 文件中的内容，这可以通过为搜索引擎爬虫提供更多上下文来改进搜索引擎优化 (SEO)。
  7. 交互式数据可视化： SVG 可用于创建交互式数据可视化，例如图表和图形，这有助于在网站上有效地传达信息。

总之，SVG 是一种多功能且功能强大的格式，用于在网站上创建和显示矢量图形。它能够无缝扩展，能够很好地适应各种屏幕尺寸和分辨率，并且支持动画和交互性，使其成为现代网页设计和开发中的宝贵工具。

在 WordPress 中安全使用矢量图像的方法

在这一部分中，我们将了解在 WordPress 中使用安全 SVG 的两种方法：手动和通过插件。然后将提供最适合您需求的选择供您选择。让我们现在开始！

手动添加 SVG 支持并清理您的代码

只需一小段代码，几分钟内即可将 SVG 支持添加到 WordPress 中。这将使您面临我们已经强调的可能的安全问题。需要采取以下措施以更安全的方式实施 SVG：

  1. 更改functions.php 文件以启用SVG 支持。
  2. 禁止所需的用户角色将 svg 文件上传到 WordPress。
  3. 在上传任何 SVG 文件之前，请先对它们进行清理。

总的来说，完成第一步和第二步并不困难。第一步是使用文件传输协议 (FTP) 连接到您的网站并找到 WordPress 的根文件夹。在那里找到你的functions.php 文件，打开它，并将以下代码粘贴到其中。

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
 
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
 
  $filetype = wp_check_filetype( $filename, $mimes );
 
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
 
}, 10, 4 );
 
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
 
function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

这样，您可以将 SVG 文件上传到 WordPress 并在媒体库中查看它们，这有两个目的。添加代码后，关闭functions.php 文件并保存修改。

现在我们需要阻止我们不信任的上传内容被损坏，事情变得更具挑战性。例如，您可能相信您的编辑和作者上传准确的文件，但不相信您的贡献者。您可以在这里采取两种方法：

  1. 为访问媒体库受到限制或无权访问的用户建立唯一的用户角色。
  2. 要限制每个用户角色可以上传的文件类型，请安装WP Upload Restriction等插件。

确实，这两种策略都有缺点，这是手动 SVG 实施可能具有挑战性的原因之一。但如果您选择阻止恶意 SVG 上传的策略，您还需要确保不会意外使用它。

理想情况下，在将任何 SVG 上传到您的网站之前，您应该使用清理工具。这将获取您的文件，检查它是否包含任何有问题的内容，如果包含则将其删除。最后，您将获得一个整洁的 SVG 文件，您可以将其提交到 WordPress。

使用安全 SVG 插件

我们打算通过使用上述方法来演示安全 SVG 实现有多么困难。这是必要的，以便您可以充分了解Safe SVG 插件的功能。

Safe SVG 的插件。简而言之，我们之前所说的困难都可以通过这个插件解决，包括：

  1. 使您可以上传 SVG。
  2. 验证您的 SVG 在媒体库中是否可见。
  3. 清理您上传的每个 SVG 的源代码以避免安全漏洞。该插件本质上是即插即用的，并采用最简单的途径来保护 WordPress 中的 SVG 实施。如果您决定使用 SVG，我们建议您尝试一下。

使用 CSS 和插件制作 SVG 动画

如果您着手将 SVG 集成到 WordPress 中，那么您无疑会希望最大化您的投资回报。这意味着，在适当的情况下，您应该使用 CSS 为 SVG 制作动画。您可以采取两种方法，我们之前已经讨论过：

  • 就像任何其他元素一样，SVG 可以使用 CSS 手动设置动画。
  • 使用SVGator等程序来创建 SVG 并为其制作动画。

如果您愿意尝试一些新事物，那么到处添加一些动画可以极大地改善您网站上的用户体验。然而，对于移动设备来说，添加视频或 GIF 的效果比利用 SVG 和 CSS 来实现这一目标要糟糕得多。

结论

通过直接在Divi 构建器中构建自定义矢量图形的能力，您可以通过强大的方式为您的网站创建插图和图标，而无需任何设计专业知识。使用这些原创图形可以让您的页面和帖子更加独特、个性化的美感。您会惊讶地发现您的 DIY 矢量图形看起来多么专业！

Divi WordPress Theme