WordPress允许上传SVG图像插件 SVG Support

WordPress 默认不允许上传 SVG文件，而 SVG Support 插件能在 WordPress 中上传 SVG图像，给网站带来好处。本文中老魏分享如何安装设置使用 SVG Support插件。

一、SVG介绍

SVG是一种开放的、基于 XML 的矢量图形格式，支持交互式元素。使用 XML定义矢量图形的文件格式。

二、为什么使用 SVG

SVG图像的好处是可以按需调整大小而不会影响图像质量。但常用的 jpg和png图片就不一样，放大后会看到很多小方格（像素化），如果压缩 jpg图片就可能让质量下降到无法正常使用。

SVG比较普遍的应用是网站上的 logo（徽标）、图标和简单的矢量图形。即使放大也没有质量损失。

同一个图片，SVG文件一般比 jpg、png等小很多，这样你的网站不会被大尺寸图片影响打开速度。矢量图形不使用像素，所以放大时图像不会像素化。

更重要的是 SVG文件可以被谷歌索引，对于网站图片的 SEO优化也是有好处的。

三、SVG 安全

SVG 文件包含了 XML 标记语言的代码。通过浏览器解析 XML 标记语言在屏幕上显示输出。但这样可能被人利用 XML 漏洞，出现未经授权访问用户数据、触发暴力攻击或跨站点脚本攻击。

尽管上文提到的高级模式>清理SVG文件能提高安全性。但是插件并不能完全防止恶意代码被上传或注入。

比较合适的解决方法是用安全可靠的网站创建的 SVG 文件，并限制为仅管理员能上传 SVG 文件。

四、SVG Support插件安装设置

在 WordPress后台>插件>安装插件，搜索“ SVG Support ”，安装并启用

勾选“仅限于管理员”，把上传svg文件的权限限制为管理员，提高安全性。

如果勾选启用高级模式，则会进入更多SVG的高级功能选项。比如使用CSS 动画和内联 SVG 渲染等高级功能。

点击“保存更改”按钮生效。

如果我们不去研究高级模式，现在就可以安全的上传 SVG图像了。

五、手动允许上传SVG

如果你不想多安装插件，也可以手动在 functon.php文件中添加代码来实现同样的功能。

编辑方法包括使用ftp软件下载并编辑 function.php文件，或者使用 WordPress子主题来添加，也可以使用 Code Snippets插件来添加，后两种方法比较简单和长期有效。

代码如下：

// Allow SVG 来源:魏艾斯笔记 https://www.vpsss.net/28411.html
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图像了。