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.
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 via SFTP 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.
2 thoughts on “How to Allow Uploading SVG Files in WordPress (Without Plugin)”
Awesome! Thanks for the simple explanation; I keep forgetting how to “activate” SVG support on my own websites, where the number of authors and editors is extremely reduced — often not more than 1 or 2; 4 at most — and so the risk of getting “bad SVGs” is next to zero.
Using a child theme, however, is practically mandatory, for keeping
functions.phpproperly updated upstream, while still allowing one to override whatever is required.The alternative, of course, would be to use some plugin such as WP Code to automatically inject PHP into the template, but… that would defeat the whole purpose of having a no-plugin solution for WordPress to accept SVG uploads!
Hi Gwyneth,
Thank you for sharing your experience and insights! It’s great to hear that the explanation on SVG support was helpful for you.
You’ve raised a valid point about the importance of using a child theme, especially when dealing with functions.php modifications. It’s a smart approach to ensure proper updates while still having the flexibility to override specific elements as needed.
Indeed, plugins can sometimes introduce unnecessary complexity, and a no-plugin solution is often preferred, especially for something as fundamental as SVG support in WordPress. Your approach of keeping the number of authors and editors limited reduces the risk of potential issues with SVG uploads.