Tuesday, November 30, 2021

2 Methods: Support and Upload SVG in WordPress Website

WordPress is not supported SVG files and you are looking for an option to upload SVG in WordPress then you are at the right place.

WordPress support only a few types of images to upload like JPG and PNG. In this article we will discuss SVG files, why use SVG files in your WordPress website, and what are options we have to upload SVG on WordPress.

What is an SVG file?

JPG file vs svg fileSVG is a vector format file and it is completely different from other images formats like JPG, PNG, or WebP files. JPG and PNG files are pixel-based, which mess these images are developed with the help of thousands of pixels.

SVG is a vector format file that displays 2-dimensional images or drawing using XML.

Why use SVG files instead of pixel-based images.

As we discussed, SVG is a vectorized file, and you can increase the size of SVG without losing the quality of the file. The size of an SVG file is very less as compared to JPG and PNG files.

When we scale up JPG and PNG files then the quality of the image decreases very quickly. SVG files not using pixels like JPG and PNG files and do not pixelate when you zoom or increase the size of the image.

SVG format logos and icons are common in websites. You may also find SVG format files for other graphics but, SVG files are not safe for your WordPress site.

So, when you try to upload SVG format file then WordPress will show the error like:

Sorry, this file type is not permitted for security reasons.

Why SVG files are not safe- Security issues?

SVG files are contain XML code and XML code is similar to HTML. To display the output on the screen, your browser or SVG editing software parses the XML markup language.

So, these SVG files can be used to gain the access to your website or to attack your website. This one is the main reason to ban the SVG by default on WordPress.

Use the SVG file from a trusted source and allow only trusted users to upload SVG files on your website. It is one of the best methods to be secure and protect your website from attacks.

Let’s have a look what are the methods to allow SVG files to upload on WordPress.

Method 1: Enable SVG Support in WordPress by using Plugins

Upload SVG in WordPress by using SVG support plugin

SVG support is the best and SVG plugin for WordPress sites to upload SVGs. First, you have to install the SVG support plugin and then you can upload SVG files on your WordPress website including inline SVG files.SVG Support

This is one of the safe SVG plugins and is available with amazing features to protect your website. You can allow other users to upload SVG files or restrict them to Admin only.

By activating the option by enabling the Advanced Mode you can use inline rendering with SVG support plugin.

The process to upload SVG in WordPress with SVG support plugin:

  1. Go to Settings > SVG Support
  2. Enable or disable the ‘Restrict to Administrator’ and Enable Advance Mode’ option on the SVG support plugin setting page. You can restrict SVG upload to selected roles.
  3. Click on ‘Save Changes’

After install and activate the plugin, you can easily upload the SVG files to your New post or existing posts like other JPG or PNG files.

JPG and PNG file sizes are high as compare to SVG and WebP format files and it can cause of slow speed of your WordPress site.

We can use JPG and PNG format images after reducing the size but we have to compromise with the quality.

But, we can use WebP format image files instead of JPG and PNG. We can convert JPG to WebP or PNG to WebP format without losing the quality and reduce 90% of the size of the image.

File sizes are matter in the SEO of your website. Because these images will reduce the 90% load of images from your WordPress site, you can increase the speed of your website.

Method 2: Support SVG uploading in WordPress with Code

Maybe, you don’t want to use a WordPress plugin and want to allow WordPress SVG support without a plugin, then you upload SVG files after adding a code in your function.php file. This method is best for you when don’t want to install the plugin to upload SVG in your media library.

The process to add custom code in the function.php file:

  1. Go to WordPress Admin dashboard
  2. Appearance > Edit Themes
  3. Select function.php file

You can also use FTP to edit the function.php file.

A child theme is the best choice to edit the function.php but you can edit the function.php file from the main theme.

// Allow SVG

add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;

if ( $wp_version !== '4.7.1' ) {

return $data;

}

$filetype = wp_check_filetype( $filename, $mimes );

return [

'ext' => $filetype['ext'],

'type' => $filetype['type'],

'proper_filename' => $data['proper_filename']

];

}, 10, 4 );

function cc_mime_types( $mimes ){

$mimes['svg'] = 'image/svg+xml';

return $mimes;

}

add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {

echo '<style type="text/css">

.attachment-266x266, .thumbnail img {

width: 100% !important;

height: auto !important;

}

</style>';

}

add_action( 'admin_head', 'fix_svg' );

But, this code will allow all types of users to upload SVG files on the WordPress website. So, with multiple users on your WordPress website, restrict the permission to upload files for other users with different roles.

WP Front role editor and User role editor are two plugins that can help you to specify the permissions to other users.

AAM is another plugin that you can use to restrict and specify permissions to different roles on your website.

Read – 10 Plugins for higher ranking and SEO of WordPress Website.

Sharing is Caring

Don't forget to share with others. Thanks! 

My Name is Rashvinder Narwal, I am in Website design and development profession from 2015. I love to share my knowledge with my readers over 15+ blogs in English and Hindi language. Thanks !

LEAVE A REPLY

Please enter your comment!
Please enter your name here