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支持的方法,欢迎在评论区提供。