Enabling the loading of SVG, AVIF and WebP files in WordPress

By default, WordPress restricts the file types that can be uploaded directly to the media library. Among the more modern and lightweight formats, SVG (Scalable Vector Graphics), AVIF (AV1 Image File Format) and WebP are gaining popularity for their efficiency and image quality. In this article, you will discover how to enable the loading of these file formats via code snippets, without the use of any external plugins.

Why Use SVG?

– ScalabilitySVGs are vector-based, which means they can be resized without losing quality. They are ideal for icons and simple graphics.

– Reduced DimensionsSVGs tend to occupy less space than raster images, especially for simple graphics.

Why use AVIF and WEBP?

– Efficient Compression: Both formats offer better compression than traditional JPEG and PNG files, making it possible to reduce the size of images without compromising quality.

– Support for TransparencyBoth AVIF and WebP support transparency, making them excellent for images with transparent backgrounds.

/**
 * Snippet Name: Enable upload files svg, avif and webp
 * Snippet Author: halkoo.com
 */
function allow_custom_uploads($mimes) {
    // Enable SVG
    $mimes['svg'] = 'image/svg+xml';
    
    // Enable AVIF
    $mimes['avif'] = 'image/avif';
    
    // Enable WebP
    $mimes['webp'] = 'image/webp';
    
    return $mimes;
}
add_filter('upload_mimes', 'allow_custom_uploads');

Check Modifications

Once the code has been added to the functions.php of your theme, you can go to your WordPress media library and try uploading SVG, AVIF and WebP files. If everything went well, you should be able to upload these formats without any problems.

Security Considerations

It is important to note that while SVG is a useful vector format, it can also present security risks if not handled correctly. SVGs can contain JavaScript code and, if uploaded from untrusted sources, could compromise the security of your site. Therefore, it is recommended to use SVG only from trusted sources and, if possible, to sanitise SVG content before uploading it.

Need help? Write to info@halkoo.com to receive a customised quote for your new website or e-commerce shop.