Enable SVG support in WordPress

Instructions: Enable SVG support in WordPress

SVG files are a must-have for web developers. They enable sharp graphics regardless of resolution and are often significantly smaller than other image file formats like PNG or JPG. Despite their many advantages, WordPress doesn't support SVG uploads by default.

In this guide, we will show you step by step how to securely embed SVG files in WordPress.

1. What are SVG files and why are they important?

SVG stands for "Scalable Vector Graphics" and is an XML-based vector image format. The main advantage of SVG files is their scalability: They remain sharp and detailed, no matter how much you enlarge them. This makes them ideal for logos, icons, and other graphics on websites. They are also often much smaller than conventional image formats, which positively impacts your website's loading time.

Advantages of SVG files:

• Unlimited scalability without loss of quality
• Small file size
• Ideal for logos, icons and other graphics
• Almost all modern browsers support SVGs

2. Why doesn't WordPress support SVG files by default?

WordPress's lack of support for SVGs is primarily due to security concerns. Because SVG files are based on XML, they can contain potentially dangerous code (e.g., JavaScript). To ensure website security, the upload of SVG files is blocked by default.

3. Security concerns with SVG files

Care should be taken when handling SVG files. Uncontrolled SVG uploads can make your website vulnerable to various attacks. Therefore, you should ensure you only use SVG files from trusted sources and implement the appropriate security measures.

Safety tips:

• Only use SVG files from trusted sources
• Restrict upload permissions (e.g. only for administrators)
• Clean SVG files before uploading

4. SVG upload with WPCode (Recommended)

There are several ways to enable SVG uploads in WordPress. Below, we'll discuss common methods.

The easiest and safest way to enable SVG files in WordPress is to use the plugin WPCodeWPCode offers a large library of pre-written code snippets, including one that allows SVG uploads in WordPress.

Step-by-step instructions:

1. Install and activate the free WPCode plugin.
2. Navigate to “Code Snippets > Add Snippet” in the admin panel.
3. Search for “svg” and select “Allow SVG Files Upload”.
4. Click on “Use snippet” and activate the snippet.
5. By default, the snippet is only available to administrators. To enable it for other user roles, modify lines 14-16 accordingly.
6. Save the settings.

This is the appropriate code:

/**
 * Allow SVG uploads for administrator users.
 *
 * @param array $upload_mimes Allowed mime types.
 *
 * @return mixed
 */
add_filter(
	'upload_mimes',
	function ( $upload_mimes ) {
		// By default, only administrator users are allowed to add SVGs.
		// To enable more user types edit or comment the lines below but beware of
		// the security risks if you allow any user to upload SVG files.
		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
);

Advantages of this method:

• Simple and secure setup
• Restricts upload to specific user roles
• No direct code access required

This recommended method makes it easiest to use SVG files in WordPress.