How to make WordPress support uploading SVG format images and displaying them in the media library

The following column WordPress Tutorial will introduce to you how to enable WordPress to support uploading SVG format images and display them in the media library. I hope it will be helpful to friends in need!

Due to the characteristics of SVG format images, malicious code may be inserted and the website is easily attacked. Therefore, for security reasons, WordPress does not support uploading SVG format images by default. In addition, unlike It is said on the Internet that SVG format images have such high application value. Except for some small icons on web pages that can use SVG images, there is no advantage in using SVG format for normal color images. However, sometimes you really need this SVG image, such as the LOGO image of my theme. If the PNG image is not very clear on the mobile phone, using the SVG format will not have this problem.

How to make WordPress support uploading SVG format images?

You can add the following code to the current theme function template functions.php:

Let WordPress support uploading SVG, and only administrators have this permission

// 只允许管理员上传SVG图片
if (current_user_can( 'manage_options' )) {
add_filter('upload_mimes', function ($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
});
}

Media library list mode Display SVG images

// 媒体库列表模式显示SVG图片
add_action('admin_head', function () {
echo "<style>table.media .column-title .media-icon img[src*=&#39;.svg&#39;]{width: 100%;height: auto;}.components-responsive-wrapper__content[src*=&#39;.svg&#39;] {position: relative;}</style>";
});

There are many similar codes on the Internet, but none of them support the media library grid mode to display SVG images. The following code can be achieved:

// 媒体库网格模式显示SVG图片
function zm_display_svg_media($response, $attachment, $meta){
if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement')){
try {
$path = get_attached_file($attachment->ID);
if(@file_exists($path)){
$svg                = new SimpleXMLElement(@file_get_contents($path));
$src                = $response['url'];
$width              = (int) $svg['width'];
$height             = (int) $svg['height'];
$response['image']  = compact( 'src', 'width', 'height' );
$response['thumb']  = compact( 'src', 'width', 'height' );
 
$response['sizes']['full'] = array(
'height'        => $height,
'width'         => $width,
'url'           => $src,
'orientation'   => $height > $width ? 'portrait' : 'landscape',
);
}
}
catch(Exception $e){}
}
return $response;
}
add_filter('wp_prepare_attachment_for_js', 'zm_display_svg_media', 10, 3);

The other one has relatively less code. It supports the media library grid mode to display SVG image codes. However, if the debugging mode is turned on, there will be an error message, but it will not affect the use.

// 媒体库网格模式显示SVG图片
function zm_svg_metadata($data, $post_id) {
$data = array(
'sizes' => array(
'large' => array(
'file' => pathinfo(wp_get_attachment_url($post_id), PATHINFO_BASENAME)
)
)
);
return $data;
}
add_filter('wp_get_attachment_metadata', 'zm_svg_metadata', 10, 2);

As for what this function is used for, it depends on whether the theme you are using requires this function. It can also be used on web pages to obtain links after direct FTP upload.

If you find it troublesome to mess with the code, you can use the following related plug-ins:

SVG Support
Enable SVG
Safe SVG（据说该插件可以检测并去除SVG中的恶意代码，与250+110有的一拼）
WP SVG images
Easy SVG Support
Enable SVG Uploads
......

The above is the detailed content of How to make WordPress support uploading SVG format images and displaying them in the media library. For more information, please follow other related articles on the PHP Chinese website!