Snippet: Allow SVG Files Upload

SVG file use is gaining popularity but WordPress still disables the uploading of SVG files by default. SVG files are essentially vector based code files which could be used to upload mallicious code.

If you create the SVGs yourself or obtain from a reputable source then you should have no issues using SVGs.

Add the following PHP code to your custom code / code plugin.

/**
 * 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
);

The importance of using SVG (Scalable Vector Graphics) files in website design remains paramount due to several key reasons.

  1. Scalability: SVGs are resolution-independent, meaning they can be scaled to any size without losing quality. With the proliferation of devices with varying screen sizes, from smartphones to large desktop monitors and even emerging technologies like foldable screens, maintaining crisp and clear graphics is crucial. SVGs ensure that icons, logos, and other graphical elements appear sharp and professional across all devices.
  2. Optimization: SVG files are typically smaller in file size compared to raster image formats like JPEG or PNG. This smaller file size results in faster loading times, which is essential for providing a smooth user experience, particularly on mobile devices with slower connections. Faster-loading websites also tend to rank higher in search engine results, contributing to better visibility and traffic.
  3. Accessibility: Accessibility is increasingly becoming a priority in web design. SVGs offer advantages in accessibility by allowing the inclusion of text within the graphic itself. This means that screen readers can interpret the text content, making it accessible to users with visual impairments. Additionally, SVGs support semantic markup, enabling developers to add metadata and descriptions that further enhance accessibility.
  4. Interactivity: SVGs support interactivity through JavaScript, allowing developers to create engaging animations and dynamic effects directly within the graphics. This capability opens up a wide range of creative possibilities for enhancing user engagement and conveying information in a visually compelling manner.
  5. SEO Benefits: Search engines can parse the content of SVG files, including any embedded text, metadata, or descriptions. By utilizing descriptive filenames, alt attributes, and other SEO best practices, SVGs can contribute to improving a website’s search engine ranking and overall visibility.
  6. Cross-Browser Compatibility: SVG is supported by all modern web browsers, including Chrome, Firefox, Safari, and Edge. This ensures consistent rendering across different platforms and eliminates the need for browser-specific workarounds or fallbacks.
  7. Future-Proofing: As web technologies continue to evolve, SVGs offer a future-proof solution for graphical content. They are based on open standards, widely supported, and can easily be edited and modified using a variety of tools and software. This flexibility ensures that SVGs will remain a viable option for web design well into the future.