Divi WordPress Theme

您可以将数十种图像文件类型用于媒体。 WordPress开箱即用,支持大多数较流行的图像文件类型,包括 .jpeg.png.gif, 和更多。 但是,它不包含对矢量图像的任何支持。

过去,我们讨论过如何创建可伸缩矢量图形(SVG)及其好处。 在本文中,我们将再次探讨SVG的概念,为什么以错误的方式使用它们可能会不安全,以及如何在不损害您的网站的情况下实际实现它们。

让我们开始工作吧!

https://www.youtube.com/watch?v=pB-JiR2_ll0

订阅我们的YouTube频道

SVG简介

SVG并非基于像素而是基于矢量的图像,正如您可能从名称中猜到的那样。 如果尝试使用文本编辑器打开常规图像文件,则会看到相对乱码。 但是,如果您尝试打开SVG,则可能会看到类似以下的代码(摘自我们关于SVG的第一篇文章):

<svg viewBox='0 0 105 93' xmlns="http://www.w3.org/2000/svg"></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill="#ED1C24"/>
</svg>

简而言之,它们是构成Adobe徽标表示的一系列矢量,并带有一些颜色:

Adobe徽标。

SVG之所以独特,是因为它们可以保持任何大小(即可扩展)的质量,并且无论使用什么尺寸,它们仍然看起来很完美。 这使它成为一些特定用例的理想文件类型:

  • 您经常想在不同平台上重复使用的徽标。
  • 您需要根据上下文缩放的图标。
  • 您要使用级联样式表(CSS)进行动画处理的图像。

从技术上讲,有三种创建SVG的方法。 您可以自己编写代码,除非您是机器,否则这是不切实际的。 其他方法是从头开始绘制SVG,或获取现有图像并使用Illustrator或Sketch等软件将其导出为SVG。

尽管有积极的方面,但使用SVG有两个缺点。 首先,它们不适用于复杂的图形。 例如,一张普通照片将需要数百万个矢量来合成,这将形成一个巨大的SVG文件。 使用SVG的第二个缺点是与安全相关的-我们将在下一节中讨论。

为什么使用SVG会影响您网站的安全性

尽管我们通常将SVG称为图像文件,但将其称为“文档”会更准确。 毕竟,您可以使用文本编辑器轻松地打开,阅读和修改SVG文件,该编辑器类似于常规文档。

问题在于在矢量信息旁边添加JavaScript的能力。 从理论上讲,这意味着如果有人上传包含恶意代码的文件,则在您的网站上实现SVG支持可能会使您容易受到攻击。

令人担忧的是,针对WordPress的SVG支持已经讨论了超过 六年

六年前的Trac门票。

虽然您不必遍历整个流程,但要想找到一种办法,直到有一种方法可以确保您上载到WordPress的SVG代码是安全的,但实施此功能可能会带来更多的问题,而不是带来的好处。

目前,已经有几种可以用来确保SVG安全的工具称为“消毒剂”。 但是,目前似乎没有很好的方法将其功能实现到WordPress中。

总体而言,在实践中向WordPress添加SVG支持相对简单。 真正的困难在于这样做的方式不会使您的网站容易受到潜在攻击。

使用WordPress安全使用矢量图像的2种方法

在本节中,我们将探讨在WordPress中安全使用SVG的手动方法和基于插件的方法。 然后,您将能够选择最适合您需求的选项。 让我们开始吧!

1.手动添加SVG支持并清理代码

您可以在短短几分钟内通过代码片段将SVG支持添加到WordPress。 但是,这将使您对我们之前讨论的潜在安全问题持开放态度。 SVG实施的更安全方法包括以下步骤:

  1. 通过修改您的来启用SVG支持 functions.php 文件。
  2. 限制您要上传的用户角色 .svg 文件到WordPress。
  3. 在上载之前,请对每个SVG文件进行消毒。

总体而言,第一步和第二步并不难完成。 第一项任务是通过文件传输协议(FTP)访问您的网站并导航到WordPress根文件夹。 在里面,寻找你的 functions.php 文件,将其打开,然后添加以下代码(由CodePen和CSS Tricks的Chris Coyier提供):

// 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 文件并关闭它。

现在事情变得有些棘手,因为我们需要阻止不信任的用户上传损坏的SVG。 例如,您可能信任您的编辑者和作者上载正确的文件,但不信任您的贡献者。 有两种方法可以解决此问题:

  1. 创建对媒体库具有有限访问权限或没有访问权限的自定义用户角色。
  2. 使用插件(例如WP Upload Restriction)可以限制每个用户角色可以上传的文件类型。

两种方法 有其缺陷,这是手动SVG实施可能会变得棘手的原因之一。 但是,一旦确定了确保没有人可以上传恶意SVG的方法,则还需要确保 也不要错误地这样做。

理想情况下,在运行之前,您将运行通过清理工具上传到网站的每个SVG。 这将带走您的文件,确保其中不包含任何不适当的内容,如果包含,则将其删除。 最终,这将为您提供一个干净的SVG文件,您可以将其最终上传到WordPress。

2.使用安全的SVG插件

通过上述方法,我们想向您展示如何实现安全的SVG复杂性。 这样您就可以正确了解Safe SVG插件的功能。

Safe SVG插件。

简而言之,此插件可以解决我们之前列出的所有问题,包括:

  • 首先使您能够上传SVG。
  • 确保您可以在媒体库中看到SVG。
  • 清理上载的每个SVG的代码,以防止安全问题。

这几乎是一个即插即用的插件,并且绝对是WordPress中安全SVG实施的最直接方法。 如果您打算使用SVG,建议您尝试一下。

如何使用CSS和插件对SVG进行动画处理

如果您遇到了在WordPress中实现SVG的所有麻烦(取决于您使用的}方法),那么您可能希望获得最大的收益。 这意味着如果情况需要,可以使用CSS为SVG设置动画。 您可以通过两种方法来完成该过程,我们过去已经介绍过:

  1. 像使用其他任何元素一样,使用CSS手动对SVG进行动画处理。
  2. 使用SVGator之类的工具来帮助您生成和动画化SVG。

如果您需要进行一些实验,那么这里和那里的一些动画确实可以使您的网站的用户体验更上一层楼。 更重要的是,使用SVG和CSS做到这一点比添加视频或GIF更好,特别是对于移动设备而言。

结论

SVG是许多情况下的绝佳选择。 举个例子,由于其可扩展性,它们是网站徽标的理想选择。 通常,使用SVG可以帮助您设计响应速度更快的网站,对于用户而言,这始终是一件好事。

但是,如果您打算向WordPress添加SVG支持,则需要确保使用一种可以确保您的网站安全的方法。 有两种建议方法:

  1. 手动添加SVG支持并清理代码。
  2. 使用Safe SVG插件。

您对如何在WordPress中安全使用SVG有任何疑问吗? 让我们在下面的评论部分中讨论它们!

文章缩略图:microtic / shutterstock.com


【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=