Allow SVG File Uploads WordPress Using Code Snippets

This code snippet enhances WordPress functionality to support SVG file uploads, handle potential errors during the upload process, and ensure that SVG files have default dimensions in the media library. The custom_mime_types function adds SVG to the list of allowed MIME types, enabling users to upload SVG files by modifying the MIME types array to include ‘svg’ => ‘image/svg+xml’. The fix_svg_upload_error function addresses issues that might arise during the upload by checking the file type and overriding it to ensure WordPress correctly recognizes SVG files, thus preventing upload errors. Lastly, the svg_meta_data function ensures that SVG files have default dimensions set in the media library, which is crucial for maintaining consistency and avoiding issues related to missing dimensions. It does this by setting default width and height attributes to 200px if the file is an SVG. Together, these functions are hooked into WordPress’s filter system, seamlessly integrating SVG support into the upload and media management processes.

SVGs (Scalable Vector Graphics) significantly enhance website speed due to their scalability without quality loss, typically smaller file sizes, and ease of compression and optimization. As text-based XML files, they compress well with gzip and can be embedded directly into HTML, reducing HTTP requests. SVGs support interactivity and animations via CSS and JavaScript without extra files, improving performance. Their ability to include metadata aids SEO and accessibility, and their consistent rendering across devices simplifies design. These features collectively lead to faster loading times, reduced bandwidth usage, and a high-quality visual experience.

function custom_mime_types( $mimes ) {
 // Add SVG to the list of supported file types.
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );
function fix_svg_upload_error( $data, $file, $filename, $mimes ) {
 $filetype = wp_check_filetype( $filename, $mimes );
 // Check if the file is an SVG.
 if ( $filetype['ext'] === 'svg' ) {
 // Override the "real" file type, allowing the SVG to be uploaded.
 $data['type'] = 'image/svg+xml';
 $data['ext'] = 'svg';
 }
 return $data;
}
add_filter( 'wp_check_filetype_and_ext', 'fix_svg_upload_error', 10, 4 );
function svg_meta_data( $data, $id ) {
 // Ensure the file exists.
 $attachment = get_post( $id );
 $path = get_attached_file( $attachment->ID );
 if ( ! file_exists( $path ) ) {
 return $data;
 }
 // Check if the file is an SVG.
 if ( pathinfo( $path, PATHINFO_EXTENSION ) === 'svg' ) {
 // Prevent issues in media library by setting a default size.
 $data['width'] = 200;
 $data['height'] = 200;
 }
 return $data;
}
add_filter( 'wp_generate_attachment_metadata', 'svg_meta_data', 10, 2 );

Warning: All code found on this site is use at your own risk vibe. It worked for me when I wrote it, but if it breaks your stuff don’t come shout at me. Happy to help if I can, but there are no guarantees expressed and implied. This is merely an example for developers most of the code examples on this site are scripts that are used in Code Snippets functions.

WordPress does not natively support SVG uploads due to security concerns, as SVG files are XML-based and can contain malicious code like JavaScript, posing a risk of cross-site scripting (XSS) attacks. Ensuring SVG files are safe requires complex validation and sanitization, which WordPress has not implemented by default. To mitigate these risks, users can inspect SVG files using a text editor like Notepad++ to ensure they do not contain harmful code before uploading them, and use plugins or custom code to handle SVGs safely.