How to Allow SVG Uploads in WordPress

This WordPress snippet enables administrators to easily upload SVG files, providing full SVG support for your website.

<?php 

function allow_svg_for_admins ($mimes) {
    if(current_user_can('manage_options')) {
        $mimes ['svg'] = 'image/svg+xml';
    }

    return $mimes;
}

add_filter('upload_mimes', 'allow_svg_for_admins');

Quick Steps to Allow SVG Uploads in WordPress

Follow these simple steps to enable SVG uploads on your WordPress site:

1. Install and activate the WPCodeBox plugin, then navigate to WPCodeBox 2 in your WordPress dashboard.
2. Copy the code snippet above and paste it into the WPCodeBox code editor.
3. Give your snippet a descriptive title (like “Allow SVG Uploads”), select PHP as the type, then click Save.
4. Enable the snippet by toggling the switch to the active position.
5. Test the upload by going to Media > Add New and uploading an SVG file. Verify everything works by checking that the SVG appears in your media library and can be inserted into posts or pages.

That’s it! Administrators can now easily upload SVG files on your WordPress site.

Allow SVG Uploads in WordPress – Additional Information

Why Are SVG Files a WordPress Security Problem?

WordPress blocks SVG file uploads by default as a protective security measure. Unlike standard image formats like JPEG or PNG, SVG files are XML-based text files that can contain executable code, making them vulnerable to malicious exploitation. This restriction aims to protect websites from potential security breaches that could compromise both the site and its visitors.

The primary security concern with SVG files is cross-site scripting (XSS) attacks, where attackers can inject malicious JavaScript or other scripts into SVG files. When these compromised files are uploaded, the embedded code executes, potentially stealing sensitive user information or performing unauthorized actions.

Another critical threat is XML External Entity (XXE) attacks, which exploit the XML structure of SVG files. Unlike images composed of pixels, SVGs use mathematical equations and can include executable code within their structure. This difference makes them particularly dangerous if not properly sanitized before upload.

Benefits of Using SVG Files in WordPress

Despite the security concerns, SVG files offer many benefits over traditional image formats:

• SVGs are vector-based graphics that scale infinitely without losing quality. This makes them perfect for responsive design and sharp displays on high-resolution screens.
• They are also typically 80%-90% smaller than PNG or JPEG. This results in faster page load times and improved overall site performance. 
• SVG files can be styled with CSS and animated with JavaScript. This makes them perfect for creating interactive graphics and dynamic visual effects.
• Search engines can index SVG content, and screen readers can access it, improving both search engine optimization and accessibility for users with disabilities.

How To Safely Use SVG Files on Your WordPress Site

When enabling SVG uploads, it’s important to follow security best practices to protect your site from being exploited:

• Always sanitize SVG files using trusted tools before uploading them to WordPress. This removes potentially malicious code while preserving the visual content of the SVG.
• Limit SVG upload permissions to administrators and trusted users to minimize potential security risks. The code provided specifically restricts SVG uploads to users with administrative permissions, which is a sensible security measure.
• Implement file size restrictions for SVG uploads to prevent potential denial-of-service attacks through excessively large files that could impact server performance.

When to Use SVG Files in WordPress

SVG files are ideal for certain types of content while being unsuitable for others. Use SVGs for:

• Logos and branding elements that need to scale perfectly across different sizes.
• Icons and interface elements that benefit from crisp rendering at any resolution.
• Diagrams, charts, and data visualizations that require precise geometric shapes.
• Decorative graphics that benefit from CSS styling and animation.

Avoid using SVGs for:

• Photographs or complex images with many colors and gradients.
• Detailed artwork that would result in excessively large file sizes.
• User-generated content where security is a primary concern.