How To Allow SVG Support In WordPress

To add support for SVG image, we use the filter upload_mimes which allows to alter the list of acceptable file extensions WordPress. SVG files extension is ‘image/svg+xml’. So, you need to place below code in your functions.php file.

function add_svg_mime_types($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'add_svg_mime_types');

By using the upload_mimes filter, we can also restrict the specific file format to upload in WordPress. Let’s say we don’t want to allow mp4 files. In that case, we should add the below code in functions.php file.

function remove_mime_types($mimes) {
    unset($mimes['video/mp4']);
}
add_filter('upload_mimes', 'remove_mime_types');

So by adding the above little piece of code, you will allow uploading SVG images in a media library. However, after uploading SVG if you go to the listing page, you will not see the thumbnail impression of your SVG file.

To display the SVG thumbnail on the listing page, we need to add a CSS rule which can hook into the WordPress dashboard.

function admin_custom_css() {echo "<style>table.media .column-title .media-icon img[src*='.svg']{width: 100%;height: auto;}</style>";}add_action( 'admin_head', 'admin_custom_css' );

After adding the above code in your functions.php file you will see the SVG thumbnail.