Enable SVG Upload WordPress Safely: Step-by-Step Guide 2024

When managing your WordPress website, you may need to upload an SVG file, but find that WordPress doesn’t allow it by default. SVG (Scalable Vector Graphics) is a popular image format because it keeps your images sharp regardless of size and is lightweight. However, WordPress restricts SVG uploads due to potential security risks. In this guide, I’ll explain how to enable SVG upload in WordPress without a plugin while ensuring your site is secure.

By the end of this guide, you will learn about:

SVG support in WordPress.
How to Allow SVG Upload in WordPress.
Various methods to enable SVG upload.

Why is SVG support limited in WordPress?

SVG files are XML-based. WordPress prevents uploading of SVGs to protect websites from malicious code. However, if used with caution, SVGs can improve the visual quality of your website.

Methods to Enable SVG Upload in WordPress

There are two primary methods to allow SVG uploads:

Adding custom code to your WordPress theme’s functions.php file.
Using a reliable plugin for SVG support.

This article focuses on enable svg upload wordpress without plugin

Method 1: Allow SVG Upload via functions.php

This method involves adding a few lines of code to your theme’s functions.php file. By doing this, you can directly enable SVG uploads on your site.

Step 1: Access Your Theme’s functions.php

From your WordPress dashboard, go to Appearance > Theme File Editor.
On the right-hand side, you will see the theme files. Find and click on functions.php.

Step 2: Add Code to Allow SVG Upload

Copy and paste the following code into your functions.php file:

				
					// Enable SVG Upload Support in WordPress
function custom_mime_types($mimes) {
    // Add SVG to the list of allowed file types
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'custom_mime_types');

Code Explanation:

custom_mime_types($mimes): This function modifies the allowed file types for uploads.
$mimes['svg'] = 'image/svg+xml';: This line adds SVG as an accepted file type.
add_filter('upload_mimes', 'custom_mime_types');: This hook applies the custom_mime_types function to the list of allowed MIME types.

Step 3: Save Changes

Once the code is added, click the “Update File” button to save the changes. You should now be able to upload SVG files to your media library.

Method 1.2: Securing Your SVG Files

While the previous method enables SVG uploads, it’s essential to secure your website because SVG files can potentially carry harmful code. This is where sanitizing the uploaded SVG files becomes necessary.

Step 1: Add SVG Sanitization Code

Copy and paste this code below the previous code in your functions.php file:

				
					// Sanitize SVG Uploads
function sanitize_svg($file) {
    if ($file['type'] == 'image/svg+xml') {
        // Disable unsafe scripts in SVG files
        $file['type'] = 'application/octet-stream';
    }
    return $file;
}
add_filter('wp_check_filetype_and_ext', 'sanitize_svg', 10, 4);

Code Explanation:

sanitize_svg($file): This function checks if the uploaded file is an SVG, and if so, treats it as a different file type (for security).
add_filter('wp_check_filetype_and_ext', 'sanitize_svg', 10, 4);: This hook runs the sanitization function during the upload process.

Step 2: Save and Test

After adding the code, update the file and test by uploading an SVG file. You should be able to upload it safely without compromising your website’s security.

Method 2: Using a Plugin for SVG Uploads

If you’re uncomfortable adding code or want a simpler option, using a plugin to enable SVG upload in WordPress is a quick alternative. Some popular plugins offer SVG support in WordPress while ensuring that all SVGs are sanitized.

Step-by-Step Guide to Using an SVG Plugin

From your dashboard, go to Plugins > Add New.
Search for “SVG Support.”
Install and activate the plugin.
Once activated, go to Settings > SVG Support to enable SVG uploads.

This method is easy but may add extra bloat to your site. Hence, using code for SVG uploads is more efficient for developers looking to keep their website light.

Advantages of enabling SVG uploads

Scalability: SVGs can be resized without losing quality, making them ideal for logos, icons and illustrations.
Lightweight: Compared to other image formats, SVG files are small, ensuring fast page load times.
Customizable: SVG files can be easily formatted using CSS, making them more flexible for web designers.

Risks of enabling SVG uploads

Security: Since SVG files are XML-based, they can contain malicious code if uploaded without proper sanitization.
Browser Compatibility: Older browsers don’t fully support SVG images, although modern ones do.

Conclusion

Enabling SVG support in WordPress can significantly improve your site’s performance and visuals. By following the methods mentioned above, you can allow SVG uploads in WordPress without compromising your website’s security. If you choose to enable SVG upload in WordPress without a plugin, remember to always sanitize your SVG files. This ensures a secure and visually appealing website for your users.

I hope this article helped you to learn How to Enable SVG Upload in WordPress. If you have any doubts or problem with the code, comment below to find the solutions. Also share this blog if you find this useful.

Want to build professional website for your Business or Store, Get a free quote here

Click here to get Premium Plugins and Themes at rs.249. Get 20% Off on your first order “WELCOME20”