How to Allow SVG Files Upload on WordPress

Allowing SVG (Scalable Vector Graphics) file uploads in WordPress is a useful capability, especially for maintaining high-quality graphics that don’t lose clarity when scaled.

Table of Contents

Uploading SVG Images to WordPress

However, by default, WordPress does not allow SVG file uploads due to security concerns—SVG files can contain malicious code.

Uploading SVG Images to WordPress

Here’s how to safely enable SVG uploads on your WordPress site:

Step 1: Understanding the Risks

Before proceeding, it’s important to understand that SVG files can potentially be a security risk because they are XML-based and can contain JavaScript. Ensure that only trusted users have the ability to upload SVG files to your website.

Step 2: Using a Plugin

The easiest and safest way to enable SVG uploads is by using a plugin that properly sanitizes the SVG files to prevent malicious code execution. Here are two popular plugins:

Safe SVG: This plugin not only allows you to upload SVG files but also sanitizes them to make them safe to use on your WordPress site.
SVG Support: This plugin allows SVG uploads and gives you the option to restrict the ability to upload SVGs to administrators only, adding an extra layer of security.

Installation:

Go to your WordPress admin panel.
Navigate to Plugins > Add New.
Search for either “Safe SVG” or “SVG Support“.
Install and activate your chosen plugin.

Step 3: Manual Code (For Advanced Users)

If you prefer not to use a plugin, you can manually add code to your theme’s functions.php file to allow SVG uploads. This method is not recommended unless you have a strong understanding of security implications.

Here’s a basic example of how you can do it:

<?php
function zerobytecode_mime_types($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
  }
  add_filter('upload_mimes', 'zerobytecode_mime_types');
  
  function zerobytecode_check_svg($checked, $file, $filename, $mimes) {
    if (!$checked['type']) {
      $check_filetype = wp_check_filetype($filename, $mimes);
      $ext = $check_filetype['ext'];
      $type = $check_filetype['type'];
      $proper_filename = $filename;
  
      if ($type && 0 === strpos($type, 'image/') && $ext !== 'svg') {
        $type = false;
      }
      $checked = compact('ext', 'type', 'proper_filename');
    }
    return $checked;
  }
  add_filter('wp_check_filetype_and_ext', 'zerobytecode_check_svg', 10, 4);

This code first adds SVG to the list of allowed MIME types in WordPress and then enforces checking to ensure that the file being uploaded actually matches the MIME type.

Or for advanced use case, you can also use the following code to allow SVG upload to WordPress only for administrator users:

<?php
/**
 * Allow SVG uploads for administrator users.
 *
 * @param array $upload_mimes Allowed mime types.
 *
 * @return mixed
 */
add_filter(
	'upload_mimes',
	function ( $upload_mimes ) {
		if ( ! current_user_can( 'administrator' ) ) {
			return $upload_mimes;
		}
		$upload_mimes['svg']  = 'image/svg+xml';
		$upload_mimes['svgz'] = 'image/svg+xml';
		return $upload_mimes;
	}
);
/**
 * Add SVG files mime check.
 *
 * @param array        $wp_check_filetype_and_ext Values for the extension, mime type, and corrected filename.
 * @param string       $file Full path to the file.
 * @param string       $filename The name of the file (may differ from $file due to $file being in a tmp directory).
 * @param string[]     $mimes Array of mime types keyed by their file extension regex.
 * @param string|false $real_mime The actual mime type or false if the type cannot be determined.
 */
add_filter(
	'wp_check_filetype_and_ext',
	function ( $wp_check_filetype_and_ext, $file, $filename, $mimes, $real_mime ) {
		if ( ! $wp_check_filetype_and_ext['type'] ) {
			$check_filetype  = wp_check_filetype( $filename, $mimes );
			$ext             = $check_filetype['ext'];
			$type            = $check_filetype['type'];
			$proper_filename = $filename;
			if ( $type && 0 === strpos( $type, 'image/' ) && 'svg' !== $ext ) {
				$ext  = false;
				$type = false;
			}
			$wp_check_filetype_and_ext = compact( 'ext', 'type', 'proper_filename' );
		}
		return $wp_check_filetype_and_ext;
	},
	10,
	5
);

The above code check the current user role. By default, only administrator can upload SVG. You can expand it to add more roles but be careful for security risks.

Step 4: Enforcing Security

Regardless of the method chosen, it’s critical to implement additional security measures:

Regularly update and maintain: Keep your plugins, themes, and WordPress core updated.
Limit upload capabilities: Only allow SVG uploads for users that absolutely need it, such as administrators.
Perform regular scans: Use security plugins to scan your WordPress site regularly for malware.

By following these steps, you can enable SVG file uploads on your WordPress site while minimizing the associated risks.

How to Allow SVG Files Upload on WordPress