How to Enable SVG Upload in WordPress Without Plugin

Hey there! Have you ever tried uploading an SVG to WordPress only to get an error message? It’s a common issue!

SVGs (Scalable Vector Graphics) are super handy because they’re crisp and lightweight, making your graphics look great on any screen size.

But out of the box, WordPress doesn’t allow SVG uploads due to potential security risks.

Today, I’ll walk you through enabling SVG uploads in WordPress without a plugin—so you can enjoy those gorgeous, scalable graphics without cluttering your site with more plugins.

Let’s get started!

How to Enable SVG Upload in WordPress Without Plugin

Why Use SVGs?

A quick story: I first got hooked on SVGs while working on a website that needed to look sharp on any device. I wanted lightweight graphics that would look just as good on mobile as on a big screen.

PNGs and JPGs were okay, but SVGs… they’re on another level! No matter the size, they stay perfectly crisp, which is a dream for anyone who loves design.

Here’s How to Enable SVG Uploads in WordPress

We’ll add a small snippet to your theme’s functions.php file to enable SVG uploads.

Step 1: Access Your Theme’s functions.php File

  1. Log in to WordPress and head to Appearance > Theme Editor.
  2. On the right, find and open functions.php. If you’re using a child theme (recommended), be sure to edit the child theme’s functions.php file so your changes are safe during updates.
  3. Backup Reminder: Just in case! A quick backup of functions.php can save you if anything goes wrong.

Step 2: Add Code to Enable SVG Uploads

Here’s a code snippet that allows you to upload SVGs safely. This snippet will tell WordPress to accept SVGs as an upload type.

function add_svg_to_upload_mimes($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'add_svg_to_upload_mimes');
  • What This Does: It adds SVGs to the list of allowed file types for WordPress uploads by modifying the upload_mimes filter. Now WordPress will recognize SVGs as a safe file type to upload.

Step 3: Extra Security (Optional but Recommended)

Since SVGs are XML-based, they can carry potentially harmful scripts if not sanitized properly. If you’re uploading SVGs from trusted sources or creating them yourself, you’re probably safe.

But if you want an extra layer of security, here’s an extra snippet you can add to limit SVG upload permissions:

function restrict_svg_uploads_to_admin($user) {
    if (current_user_can('administrator') || current_user_can('editor')) {
        return true;
    }
    return false;
}
add_filter('upload_mimes', 'restrict_svg_uploads_to_admin');

This ensures that only admins or editors can upload SVGs, adding a layer of protection.

Step 4: Save and Test

After you’ve added the code snippets, click “Update File” to save. Now, head over to Media > Add New in WordPress and try uploading an SVG file. It should upload just like any other image!

SVGs in Action!

One of my favorite ways to use SVGs is for logos and icons. They look razor-sharp and don’t bloat your site. For example, on one of my projects, I swapped out all the PNG icons for SVGs, and the page loaded noticeably faster.

Plus, those icons look great on any screen size—no pixelation, just pure, clean lines.

How to Remove SVG Upload Support

If you ever decide to go back to the default settings and remove SVG support, just delete the code snippets we added in functions.php. WordPress will go back to its usual upload rules.

Wrapping Up

And that’s it! Enabling SVG uploads in WordPress without a plugin is super easy, and now you can enjoy all the benefits of scalable, lightweight images. I hope this quick tip helps you add a bit more flexibility to your site design! If you have any questions, feel free to reach out—I’d love to help.

Happy SVG-ing, and keep those graphics crisp! 😄


Discover more from Prime Inspire

Subscribe to get the latest posts sent to your email.

Leave a Reply

Scroll to Top

Discover more from Prime Inspire

Subscribe now to keep reading and get access to the full archive.

Continue reading