How To Allow SVG Support In WordPress

Are you looking to upload SVG images to your WordPress website? WordPress by default does not allow to upload SVG files via media uploader. In this article, we show how to allow SVG image to be uploaded to WordPress.

SVG(Scalable Vector Graphics) defines vector-based graphics in XML format. In other words, SVG defines graphics in XML format. SVG files graphics do NOT lose any quality if they are zoomed or resized. Additionally, SVG file size is small and thus they are popular nowadays.

When it comes to WordPress, if you try to upload SVG image from the media uploader you will get the error like ‘Sorry, this file type is not permitted for security reasons.‘.

SVG Error

This is because SVG MIME type is not added in the default MIME types allowed to upload to WordPress. To get the list of all default MIME types one can use the method get_allowed_mime_types(). This function returns the array of MIME types.

That being said, let’s see how to add WordPress support for SVG file.

Allow SVG File To Upload

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.

No Thumbnail

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.

Thumbnail

Related Articles

If you liked this article, then please subscribe to our Youtube Channel for video tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *