SVG Images are a great choice for WordPress websites because they offer scalability, small file sizes, and high-quality graphics. However, WordPress does not allow SVG uploads by default due to security concerns. This limitation can be frustrating, especially if you want to use SVG images for icons, logos, or other design elements.
Fortunately, you can enable SVG uploads in WordPress using either a plugin or custom code. In this step-by-step tutorial, we will walk you through both methods so you can easily upload SVG files without any issues. You can choose the method that suits you best, and we’ll ensure both options are simple, safe, and easy to follow.
Allow SVG Upload Using a Plugin
In this step, we will use an SVG support plugin to enable SVG uploads in WordPress. We’ll guide you through the entire process, from downloading to using the plugin, step by step.
Step 1: Download and Install the SVG Support Plugin
First, download and install the SVG Support plugin to allow easy SVG file uploads.
- Click on Plugins in the WordPress dashboard.
- Select Add New Plugin.
- Type SVG in the plugin search bar.
- Install and activate the SVG Support plugin, as shown in the screenshot below.
Step 2: Upload SVG Image
In this step, we will show you how to upload SVG images. Ensure that the SVG Support plugin is activated; otherwise, SVG files will not be visible during the upload process.
- Click on the Media option in the WordPress dashboard.
- Select Library under the Media section.
- Click on the Drop files to upload button.
- Choose the SVG image from the folder where it is saved.
The screenshot below displays the result after successfully uploading the SVG image to the WordPress media library.
Final Result of Enabling SVG via Plugin
The screenshot below shows the result of enabling SVG using a plugin. It also shows that we have successfully uploaded the SVG image without any issues.
Learn More: 23 WordPress Plugins for Divi Website in 2024
Allow SVG Upload Using PHP Code
In this section, we will demonstrate how to enable SVG image uploads using PHP code. This method is simple and can be done easily by following the steps below.
Step 1: Adding PHP Code for SVG Support in WordPress
In this step, you need to copy the PHP code provided below. There is no need for any separate code—simply use our code and paste it by following our step-by-step instructions. Make sure not to include the PHP opening and closing tags, just paste the code below the default PHP code.
// Enable SVG file upload support in WordPress for Divi Cake
function divi_cake_enable_svg_upload($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'divi_cake_enable_svg_upload');
// Fix SVG display in media library
function divi_cake_fix_svg_display() {
echo '<style>
.attachment-details .details .filename {
word-wrap: break-word;
}
</style>';
}
add_action('admin_head', 'divi_cake_fix_svg_display');
- Click on the Appearance option in the WordPress dashboard.
- Select Theme File Editor from the dropdown.
- Click on functions.php in the theme file editor.
- Scroll to the bottom of the functions.php file and paste the copied PHP code.
- Click on the Update File button to save the changes.
Learn More: 8 Best WordPress Image Optimization Plugins in 2024
Step 2: Upload the SVG Image to WordPress Media Library
Now, go back to the Media Library and upload the SVG image from your PC.
- Click on the Select Files button.
- Choose the SVG image from your PC, as shown in the screenshot below.
Final Result of Enabling SVG via PHP Code
The screenshots below show the result after successfully enabling SVG using the PHP code. It also confirms that we have easily uploaded the SVG image without any difficulties.
Conclusion
In this tutorial, we’ve walked you through two effective methods to allow SVG uploads in WordPress using a plugin and by adding custom PHP code. Both methods offer unique advantages, with plugins providing a quick, beginner-friendly solution and PHP code offering more customization and control for those familiar with coding.
By following the steps outlined for both options, you can easily enable SVG uploads and enhance your website with scalable, high-quality images. Whether you opt for the simplicity of a plugin or the flexibility of custom code, both approaches ensure that you can seamlessly incorporate SVG images into your WordPress website. Choose the method that best suits your needs, and start utilizing SVG files for a more efficient and visually appealing web design.
Learn More: How To Enable Any File Type Uploads In WordPress/Divi
0 Comments