Upload SVG Files on WordPress

SVG-files-on-WordPress-banner

Do you want to add SVG files to your WordPress site? By default, WordPress allows you to upload all popular image, audio, and video file formats, but SVG is not among them. In this article, we will show you how to easily add SVG in WordPress.

There are two option to enable SVG files support on WordPress.

OPTION 1. Upload SVG Files in WordPress Using SVG Support plugin.

First, you need to install and activate the SVG Support plugin. Upon activation, you need to visit Settings » SVG Support page to configure plugin settings.


svg-support-banner

On the settings page, you need to check the box next to ‘Restrict to Administrators?’ option. This will allow only a site administrator to upload SVG files in WordPress.

The next option is to turn on the advanced mode. You only need to check this option if you want to use advanced features like CSS animations and inline SVG rendering.

Don’t forget to click on the save changes button to store your settings.

There is another plugin you can use

This Plugin allows you to perform sanitization of SVG files uploaded to WordPress.

The first thing you need to do is install and activate the Safe SVG plugin.

The plugin works out of the box, and there are no settings for you to configure. You can simply go ahead and start uploading SVG files.

The downside is that this plugin allows SVG uploads by all users who can write posts on your WordPress site. In order to control who can upload files, you will need to purchase the premium version of the plugin.

OPTION 2. Enable SVG Files in WordPress by editing themes function file.

Log in to your WordPress admin area and go to Appearance » Theme Editor and find functions.php after which copy and paste the code below at the end of the file and save it.
Note:
 Before you proceed, remember to back up your WordPress website.


    // Allow SVG Files Upload.
add_filter('wp_check_filetype_and_ext', function ($data, $file, $filename, $mimes) {
    if (!$data['type']) {
        $wp_filetype = wp_check_filetype($filename, $mimes);
        $ext = $wp_filetype['ext'];
        $type = $wp_filetype['type'];
        $proper_filename = $filename;
        if ($type && 0 === strpos($type, 'image/') && $ext !== 'svg') {
            $ext = $type = false;
        }
        $data['ext'] = $ext;
        $data['type'] = $type;
        $data['proper_filename'] = $proper_filename;
    }
    return $data;
}, 10, 4);
add_filter('upload_mimes', function ($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
});
add_action('admin_head', function () {
    echo '';
});

If you can’t see preview when you go WordPress » Media » Library, you have to add this code below in the same functions.php file.


   //** * Enable preview / thumbnail for svg image files.*/
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_svg );
        $info = @getimagesize( $path );
        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }
    return $result;
}
add_filter('file_is_displayable_image', 'svg_is_displayable', 10, 2);

Find more Tutorials like this in the Tutorials section.

Leave a Comment

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

Latest Video

For more videos, visit the channel.

Recent Posts

Please Read

This website totally runs on ads, and it would help alot if you just click on one or two ads whenever you visit this website.
Not asking for any kind of donation, just click on any one of  ads. That would help keeping this website alive.
   
Thank You
for your support!