WordPress media uploader supports multiple file formats out of the box. With respect to images, it supports .jpg, .jpeg, .png, .gif, and .ico. However, when you try to upload a SVG (Scalable Vector Graphics) it throws the following error:
“file.svg” has failed to upload.
Sorry, this file type is not permitted for security reasons.
You can enable the support for SVGs in WordPress media uploader by adding the following lines of code in your theme’s functions.php:
add_filter('upload_mimes', 'bt_upload_svg');
function bt_upload_svg ( $existing_mimes = array() ) {
// add your extension to the array
$existing_mimes['svg'] = 'image/svg+xml';
return $existing_mimes;
}
Quick Reference: Here’s a quick guide on how to edit functions.php in WordPress and here’s a code snippet for uploading additional file types to WordPress website.
This code snippet will add the support for SVGs in WordPress media uploader. You will thus be able to upload a SVG logo to your WordPress website via logo uploader in WordPress customizer. Not only this, you will also be upload SVGs on any webpage. The good news is, you can also set SVGs as featured images for your posts and pages.
If all you want is to upload SVGs to WordPress, then simply copy and paste the above code to functions.php.
Pro Tip: Style your SVG elements on your WordPress website
If you want to add CSS styles to the SVG elements, here is the nifty plugin to do the trick: SVG Support. This plugin allows you to do more with your SVGs / SVG elements on the site:
- At the very basic, it adds the support for uploading SVGs to WordPress media library.
- If you enable the advanced mode,this plugin will allow you to embed your SVG images just like a standard image. It will add “style-svg” to the IMG tag and will dynamically replace it with your actual SVG code while rendering it on the front-end.
- It also allows you to add custom CSS class to your SVG elements. This gives you better control over SVGs in terms of targeting the SVG elements via CSS and JS. You can get as creative with SVGs as you want!!
- By default, WordPress doesn’t allow SVGs for security reasons. This plugin covers you on security grounds as well. Under the plugin settings, it gives you an option to “Restrict SVG upload privileges to Administrators only”.
Thoughts on SVG Logo
Logos are usually vector based. For website design, we have been using PNGs (and JPG) logos since ages and this trend is now changing for the better web. The logo design has evolved in lieu of modern logo requirements. When we are working on PSD to WordPress conversion projects, we specifically request our clients to provide us SVG logos.
The beauty of SVG logos is that you can use it wherever you like without worrying about size, resolution or load times. SVG logos are responsive in nature — they scale well for mobile screens, they look great on tablets. SVG logos beautifully adapt across the device screens without losing quality or sharpness. Moreover, the same SVG can be used for logo, favicon, site icon and as icons for oEmbeds on your site.
Are you struggling with setting up SVG logo on your WordPress website? Just leave a comment here, we will be happy to help you with setting it up on your site 🙂
