WordPress 如何允许上传 SVG 图像

SVG 作为一种通用的矢量图格式，已经被主流浏览器广泛支持。但 WordPress 媒体库默认是不支持 SVG 上传的，官方的不支持导致很多用户望而却步。官网的声明是嵌入JavaScript代码会带来一些安全性问题。但也不是没有办法解决，在 WordPress 是一个开放的平台，虽然 WordPress 默认不支持上传SVG图像，但是我们可以通过一些办法来为我们的站点添加这个功能。

什么是 SVG？

SVG 文件是一种矢量图像。矢量文件的组成与更常见的图像文件类型不同。例如 JPG 由数千个像素组成。另一方面，对于 SVG 文件，情况并非如此。 

矢量图像更像是一组书面说明。它们不包含形成更大图像的像素。相反，它们包含一组类似于模式的数据，可创建二维图像。这意味着使用 SVG 文件有一些独特的好处。 

为什么使用 SVG？

SVG 有很多好处。由于它们具有矢量图像的高扩展性，因此无论调整到多大尺寸，都不会影响图像质量。如果您尝试放大 JPG 的大小，质量会很快下降到无法使用的水平。

虽然 SVG 不适合显示传统照片，但它们是您网站上的商业徽标、图标和其他简单图形的绝佳选择。

此外，SVG 文件往往比其他图像类型小得多。这意味着您的网站不会被图片加载缓慢困扰。更重要的是 SVG 文件被谷歌索引，并且已经有很长一段时间了。这对网站的搜索引擎优化 (SEO) 来说也是绝佳选择。 

如何将 SVG 上传到 WordPress

由于 WordPress 不支持开箱即用的 SVG，因此您必须更加努力地将它们包含在您的网站上。在接下来的几节中，我们将介绍如何使用插件和手动过程将 SVG 文件添加到您的网站。

方法一：通过代码为 WordPress 添加 SVG 支持

下面是允许在WordPress中上传SVG图像的代码，简单的添加到主题的functions.php文件 或插件文件中即可为WordPress启用SVG支持。

// Add 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' );

使用这种方法为WordPress添加SVG支持没有安全检查，不建议使用在多用户WordPress站点中。

方法二：通过插件为WordPress启用SVG支持

使用Safe SVG插件为WordPress添加SVG支持简单方法，推荐大家都使用这种方法来实现。这个插件除了能启用WordPress支持，还会对上传的SVG文件进行清理和验证，以阻止可能影响网站的SVG漏洞。

Safe SVG插件的安全处理功能是通过svg-sanitizer库实现的，如果您有代码洁癖，想在自己的主题或插件中集成SVG支持，可以参考Safe SVG插件实现安全处理功能。

其他为WordPress启用SVG支持的方法

除此之外，流行的Elementor编辑器也内置了启用SVG支持的功能，不过貌似只能在Elementor编辑器中上传SVG、无法在默认的媒体库中上传。

如果您还有其他为WordPress启用SVG支持的方法，欢迎在评论区提供。