Using SVG (Scalable Vector Graphics) files for your website logo, illustrations, and charts could give you several benefits. Some of the SVG files benefits are:
- Can be resized without losing their quality which makes them perfect for a responsive web
- Smaller in size compared to other image formats like JPG which means faster load time for your website
- SEO-friendly, as they can be easily indexed by search engines, improving the visibility of your website in search engine results pages.
Unfortunately, WordPress doesn’t accept files outside of the registered file extension to be uploaded including SVG files.
If you still want to use SVG files but want to avoid installing more plugins on your website, you can do so by adding a code snippet to your theme functions.php file which we will show you in this tutorial.
Let’s get started!
Uploading SVG Files in WordPress
Before you start, you may want to back up your site and use a child theme to avoid breaking the parent theme or losing your changes when you update your theme. And once you’re ready, start by navigating to Appearance → Theme File Editor from your WordPress admin dashboard (if you’re using a block theme, the Theme File Editor is under the Tools menu) then copy the following code to the bottom of functions.php file on the Theme Files list.
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );Once you’ve placed the code, save the changes by clicking on the Update File button.
By now you should be able to upload an SVG file to your WordPress website.
If you still can’t upload an SVG file after adding the above function, open the wp-config.php file of your WordPress site and add the following line. You can open the file using the file manager feature of your hosting service or using FTP client apps such as FileZilla, WinSCP (Windows only) and Cyberduck. The line you need to add:
define('ALLOW_UNFILTERED_UPLOADS', true);
Bottom Line
Using SVG files for some of your WordPress images like logos, icons or illustrations could help reduce your website load time because they are smaller in size compared to other image extension. And for your responsive web, they are a perfect fit as they can be resized without losing quality. Even though by default WordPress doesn’t let you upload these files, this tutorial showed you how to upload them using a code snippet.
