Enabling SVG upload in WordPress can be a standard practice when creating a WordPress website, but whether it should be depends on the specific needs and goals of the project. Allowing WordPress to upload SVG (Scalable Vector Graphics) files can be important for several reasons.
Importance of uploading and using SVG files:
1. Scalability Without Quality Loss
SVG files are vector-based, meaning they can scale to any size without losing quality. This is particularly useful for logos, icons, and other graphics that need to appear crisp on screens of all sizes, from small mobile devices to large desktop monitors.
2. Smaller File Sizes
Compared to raster images like PNG or JPEG, SVG files are often much smaller in size. This can help improve website load times and reduce bandwidth usage, which is beneficial for both user experience and SEO.
3. Customizability
SVG files are essentially XML code, allowing for easy customization. Developers can change colors, sizes, and other properties directly through CSS or JavaScript without needing to create new image files.
4. Accessibility
SVG images can be made more accessible by adding descriptive titles and text within the SVG code. This can improve the experience for users relying on screen readers.
5. SEO Benefits
Since SVGs are text-based, they can be indexed by search engines, potentially improving the SEO of your website. Descriptive titles, metadata, and text within SVGs can contribute to better search visibility.
6. Animation Capabilities
SVGs support animations and interactions. This means you can create more dynamic and engaging elements on your website without relying on heavy JavaScript or GIFs.
7. Consistency Across Browsers
SVGs are supported by all modern web browsers, ensuring consistent appearance and behavior across different platforms.
How to allow SVG uploads for admin users
To enable SVG upload in WordPress, you only need this code below. This code provides a good balance between functionality and security, especially by restricting uploads to administrators only.
/**
* Allow SVG uploads for administrator users.
* @param array $upload_mimes Allowed mime types.
* @return mixed
*/
add_filter(
'upload_mimes',
function ( $upload_mimes ) {
// Only allow SVG uploads for administrators
if ( ! current_user_can( 'administrator' ) ) {
return $upload_mimes;
}
// Add SVG and SVGZ mime types
$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.
* @return array Updated values for extension, mime type, and corrected filename.
*/
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 the file type against the allowed mimes
$check_filetype = wp_check_filetype( $filename, $mimes );
$ext = $check_filetype['ext'];
$type = $check_filetype['type'];
$proper_filename = $filename;
// Ensure that only SVG files are allowed if the mime type starts with 'image/'
if ( $type && 0 === strpos( $type, 'image/' ) && 'svg' !== $ext ) {
$ext = false;
$type = false;
}
// Return the corrected file type information
$wp_check_filetype_and_ext = compact( 'ext', 'type', 'proper_filename' );
}
return $wp_check_filetype_and_ext;
},
10,
5
);
Explanation of the Code:
- Security Check for Administrators: The
upload_mimesfilter is used to allow only administrators to upload SVG files, which mitigates some of the security risks by limiting who can upload SVG files. - MIME Type Check: The
wp_check_filetype_and_extfilter ensures that the file being uploaded is correctly identified as an SVG file. It checks the MIME type and extension to make sure that only SVG files are uploaded. - Ensuring Proper File Type: The additional check ensures that only files with the correct MIME type (
image/svg+xml) and the.svgextension are allowed.
Security Consideration
Even with these measures, SVG files can still pose security risks because they can contain JavaScript or other code that could be exploited. Alternatively, to enable SVG upload in WordPress, consider using a plugin or library to sanitize SVG files before allowing them to be uploaded. For example, you could use a plugin like “Safe SVG” to sanitize SVG files automatically.
