Are you looking to upload SVG images to your WordPress website? WordPress by default does not allow to upload of SVG files via media uploader. In this article, we show how to allow SVG images 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 file 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 an SVG image from the media uploader you will get the error like ‘Sorry, this file type is not permitted for security reasons.‘.

This is because the 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 files.

Allow SVG File To Upload

To add support for SVG images, we use the filter upload_mimes which allows us to alter the list of acceptable file extensions in WordPress. SVG files extension is ‘image/svg+xml’. So, you need to place the 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 the 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.

Related Articles

• Upload Files Programmatically In WordPress
• Upload Image Using Bulletproof Library In PHP
• How To Change WordPress Logo On Login Page

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