SVG files are highly versatile and scalable, making them ideal for websites. However, WordPress restricts SVG uploads due to security risks. In this guide, learn two effective ways to enable SVG support in WordPress while keeping your site secure.

What is SVG?

SVG, or Scalable Vector Graphics, is an XML-based format for displaying two-dimensional graphics. Unlike raster images like PNG or JPEG, SVG files use mathematical paths, allowing them to scale infinitely without losing quality. This makes SVGs ideal for responsive designs where graphics need to look sharp on any screen size.

SVGs are widely used for logos, icons, and illustrations because they are lightweight and customizable. Additionally, they can be styled or animated using CSS and manipulated with JavaScript, making them versatile for modern web design.

A laptop in a table with an SVG icon on the screen

Why SVG Files are Important?

SVGs are a popular choice for websites because:

  • They’re scalable without losing quality, ideal for responsive designs.

  • SVG files are lightweight, improving page load times.

  • They’re customizable, allowing easy edits using CSS or JavaScript.

Despite these benefits, WordPress blocks SVG uploads due to potential security vulnerabilities like XML injection. Proper implementation ensures you enjoy the benefits of SVGs while maintaining your site’s security.

Step-by-Step Guide to to upload an SVG to WordPress

Method 1: Enabling SVG Support Using a Plugin

Plugins offer a hassle-free way to enable SVG uploads in WordPress while ensuring your site remains secure. Follow these steps:

Step 1: Download the plugin

First, you’ll need to download and install an SVG plugin. Some best rated SVG file plugins include:

Step 2: Install an SVG Plugin

  1. Log in to your WordPress dashboard.
  2. Navigate to Plugins > Add New.
  3. Search for “SVG Support” or similar trusted plugins.
  4. Click Install Now, then Activate the plugin.

Step 3: Configure Plugin Settings

  1. Go to Settings > SVG Support (or the plugin’s settings page).
  2. Enable Secure Mode to sanitize SVG files during uploads. This protects your site from malicious SVG code.
  3. Save changes.

Step 4: Upload SVG Files

  1. Navigate to Media > Add New.
  2. Upload your SVG file like any other media. It should now appear in your library.
Pros of Using a Plugin:
  • No coding required.
  • Handles security sanitization automatically.
  • Easy setup for beginners.
Cons:
  • May slightly increase plugin dependency on your site.
  • Can affect website core web vitals

Method 2: Manually Enabling SVG via functions.php

For users comfortable with coding, editing the functions.php file offers a lightweight way to enable SVG uploads without relying on plugins.

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

  • Log in to your WordPress admin dashboard.
  • Go to Appearance > Theme Editor.
  • Locate and open the functions.php file.

Step 2: Add Code to Enable SVG Uploads

Paste the following code into the file to allow SVG uploads:

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

Step 3: Secure SVG Uploads

To protect your site from malicious SVG files, sanitize uploads by adding this code:

            function sanitize_svg_upload($file) {
    $file['name'] = preg_replace('/\.svg$/i', '', $file['name']) . '.svg';
    return $file;
}
add_filter('wp_check_filetype_and_ext', 'sanitize_svg_upload');

Step 4: Save and test your changes

Save the file and upload an SVG via Media > Add New to ensure the feature works as expected.

Both methods—using plugins and editing functions.php—offer effective ways to enable SVG uploads in WordPress. Choose the approach that aligns with your technical expertise and site needs:

  • Opt for plugins if you prefer a quick, secure, and user-friendly method.
  • Use functions.php for a lightweight, code-driven solution.

By implementing SVGs correctly and securely, you’ll enhance your site’s visuals, improve load times, and elevate the overall user experience.

Share to social channels