Because SVG files are lower in size than other image extensions, using them for some of your WordPress pictures like logos, icons, or illustrations may help speed up how quickly your website loads. They also match perfectly for your responsive web because they can be resized without sacrificing quality. This tutorial shows you how to upload these files using a code snippet even though WordPress by default prevents you from doing so.
SVG (Scalable Vector Graphics) files can offer a number of advantages for logos, charts, and illustrations on your website. They have the benefit of being scalable without losing quality, which makes them perfect for responsive web design. Moreover, SVG images load websites faster than other image formats like JPG because they are smaller. Also, because search engines can readily index them, they are SEO-friendly and will increase the visibility of your website in search engine results.
Unfortunately, WordPress does not support SVG files and other file types without registered file extensions. But, you can add a code snippet to your theme’s functions.php file to use Svg on your website without adding other plugins, which we will demonstrate in this tutorial.
Let’s get started!
Uploading SVG Files in WordPress
Before you begin, it is recommended that you backup your website and use a child theme to avoid breaking the parent theme or losing your changes when updating your theme. Once you are prepared, navigate to Appearance → Theme File Editor from your WordPress admin dashboard, or under the Tools menu if you are using a block theme. Then, copy the following code to the bottom of the functions.php file on the Theme Files list:
function custom_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );
Once the code has been added, save the changes by selecting the Update File button. An SVG file is now able to be uploaded to your WordPress website.
If you are still unable to upload an SVG file after adding the above function, open the wp-config.php file of your WordPress site and add the following line:
"ALLOW UNFILTERED UPLOADS" define("true");
You can use the file manager function of your hosting provider to open the file, or you can use FTP client software like FileZilla, WinSCP (for Windows only), and Cyberduck.
In conclusion, since SVG files are smaller in size than other image formats, using them for specific pictures on your WordPress site like logos, icons, or illustrations might help save the time it takes for your website to load. They may also be resized without sacrificing quality, making them a perfect fit for responsive web design. Despite the fact that WordPress does not by default permit you to upload these files, this guide demonstrated how to do it by using a code snippet.
