How to Enable SVG Support in WordPress

Reading Time: 3 min, 56 sec

SVG is one of the most efficient and flexible image formats for the web. It is lightweight, resolution-independent, and perfect for responsive websites. However, WordPress does not allow you to upload SVG files due to security concerns by default. This can be a little frustrating if you want to use SVG logos, icons, or illustrations on your WordPress website.

In this guide, I will explain what SVG files are, why WordPress blocks them, and how you can safely enable SVG support on your WordPress website.

What is an SVG File?

SVG stands for Scalable Vector Graphics. Unlike traditional image formats such as JPEG or PNG, SVGs are not made up of pixels. They are XML-based vector images, meaning they are drawn using code that defines shapes, paths, and colors.

Because of this, SVG files can scale up or down infinitely without losing quality. This makes them ideal for:

• Logos and icons that need to look sharp on all screen sizes
• Illustrations with clean lines and minimal file size
• Animations and interactive graphics that can be styled using CSS or JavaScript

For example, a 10KB SVG logo can look sharper than a 100KB PNG version, and it will still load faster.

Why WordPress Blocks SVG Uploads

WordPress blocks SVG uploads by default for security reasons. Since SVG files are XML documents, they can contain malicious scripts or code that might harm your website if not properly sanitized.

That said, with proper sanitization, SVG files are perfectly safe to use. The goal is to enable SVG support responsibly while ensuring your website’s security remains intact.

Method 1: Enable SVG Uploads Using a Plugin

If you are not comfortable editing code, the easiest way to enable SVG uploads is by using a plugin.

Most popular is the SVG Support. Go to your WordPress dashboard and navigate to Plugins → Add New → Search for “SVG Support“. Install the plugin and activate.

Once activated, Go to Settings → SVG Support. Here, enable Sanitize SVG option for better security If you want to use SVGs inline (to style them with CSS), enable Advanced Mode.

The plugin offers secure SVG uploads, and automatic sanitization. You also get role-based access control and multisite compatibility.

You can also Safe SVG. The plugin properly Sanitises SVGs to keep your website safe. It also offers SVGO Optimisation and lets you see SVGs in the Media Library. You can also choose who can upload SVGs on your website.

Step 2: Configure the Plugin

Now you can upload SVG files directly to your WordPress media library just like any other image.

Method 2: Enable SVG Support Manually (With Code)

If you prefer to keep your site lightweight and avoid plugins, you can enable SVG uploads by adding a few lines of code.

Step 1: Add SVG MIME Type Support

Open your theme’s functions.php file and add the following code snippet:

function twg_enable_svg_uploads($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'twg_enable_svg_uploads');

This allows WordPress to recognize SVG files as a valid upload type.

Step 2: Restrict Access for Security

To make it safer, you can restrict SVG uploads only to administrators by adding this code:

function twg_restrict_svg_uploads($mimes) {
    if (current_user_can('administrator')) {
        $mimes['svg'] = 'image/svg+xml';
    }
    return $mimes;
}
add_filter('upload_mimes', 'twg_restrict_svg_uploads');

This ensures that only administrators can upload SVGs, reducing the security risk.

Step 3: Sanitize SVG Files

To prevent malicious SVG files from being uploaded, you can use a sanitization library like enshrined/svg-sanitize. This library removes potentially harmful scripts embedded in SVG files. You can add it via Composer or manually integrate it into your theme or plugin.

Read: How to fix “415 Unsupported Media Type” Error in WordPress

Tips for Using SVGs in WordPress

• Always sanitize your SVGs before uploading. Use tools like SVGOMG to clean and optimize your SVG files.
• Do not upload SVGs from untrusted sources. It is really risky. Malicious SVGs can contain harmful code. Only use SVGs you create or download from reputable websites.
• While most modern browsers support SVG, some old browsers may not. So, it is important to test your website to ensure compatibility.
• Always use inline SVGs for styling. Inline SVGs can be styled or animated with CSS and JavaScript, which offers more design flexibility.

Wrap Up

Enabling SVG support in WordPress can significantly improve your website’s performance and visual quality. Whether you choose a plugin or a manual method, always keep security in mind.

SVGs are lightweight, scalable, and versatile. It makes them a must-have for modern websites. With the right setup, you can enjoy crisp icons, responsive logos, and fast-loading visuals without compromising your website’s safety.