How to upload SVG to WordPress Media

upload svg to wordpress media

In the dynamic landscape of web design and development, incorporating Scalable Vector Graphics (SVGs) into your WordPress website can significantly enhance its visual appeal and interactivity. However, WordPress, by default, restricts SVG due to security concerns. and allows you to upload almost all popular image, audio, and video file formats. Fear not! In this comprehensive guide, we’ll explore all possible methods to safely upload SVG to WordPress Media.

Method 1: Using a Plugin

Plugins offer a user-friendly way to enable SVG uploads on your WordPress site. One popular choice is the “SVG Support” plugin. For more details regarding installing the plugin, see our step-by-step guide on how to install a WordPress plugin.

Configuration:

  • Go to “Settings” > “SVG Support.”
  • Customize settings to allow SVG uploads for specific user roles.
  • Optionally, specify allowed SVG MIME types for added security.

Method 2: Upload SVG to WordPress Media with a PHP snippet

In this method we will provide you a PHP code snippet which you can insert in either your custom plugin, child theme or any code snippets plugin.

function wpexpertguide_allow_svg_upload($upload_mimes) {
    $upload_mimes['svg'] = 'image/svg+xml';
    $upload_mimes['svgz'] = 'image/svg+xml';
    return $upload_mimes;
}
add_filter('upload_mimes', 'wpexpertguide_allow_svg_upload', 10, 1);

If you want to allow only administrators to upload SVG files. here is how you can do that.

function wpexpertguide_allow_svg_upload($upload_mimes) {
    // Check if the current user is an administrator
    if (current_user_can('administrator')) {
        $upload_mimes['svg'] = 'image/svg+xml';
        $upload_mimes['svgz'] = 'image/svg+xml';
    }
    return $upload_mimes;
}
add_filter('upload_mimes', 'wpexpertguide_allow_svg_upload', 10, 1);

Conclusion

By exploring these methods, you can safely upload SVG files to your WordPress media library, unlocking new possibilities for design and interactivity on your website. Whether you opt for a plugin-based solution, manual code modification, or leverage existing theme functionality, ensure that you prioritize security while enjoying the benefits of SVG integration. Happy uploading!

Leave a Reply

Your email address will not be published. Required fields are marked *