SVG (Scalable Vector Graphics) files are powerful, lightweight, and perfect for modern web design. However, WordPress doesn’t allow SVG uploads by default for security reasons.
I know many people reach for plugins like SVG Safe, Safe SVG, or Upload SVG to handle this—and while they work, they come with hidden costs. I’ve learned that every additional plugin increases your site’s attack surface, slows performance, and adds code you don’t fully control. I strongly recommend using just a few lines of PHP code in your functions.php instead. It’s more secure, faster, and easier to maintain than another plugin you need to update and monitor.
In this guide, I’ll show you how to safely enable SVG uploads for administrators using pure PHP code—protecting your site from malicious attacks while keeping your installation lean and secure.
Why SVG files are important:
- Scalable: Perfect resolution at any size
- Lightweight: Smaller file sizes than PNG/JPG
- Flexible: Easy to edit and customize with CSS
- Professional: Ideal for logos, icons, and illustrations
Admin Only Uploads:
SVGs can embed JavaScript, which means malicious actors could inject XSS attacks. This code restricts SVG uploads to administrators only—keeping your site secure. Add this code to your theme’s functions.php file:
/**
* Allow SVG uploads (Admins only for security)
*/
add_filter( 'upload_mimes', function( $mimes ) {
if ( current_user_can( 'manage_options' ) ) {
$mimes['svg'] = 'image/svg+xml';
$mimes['svgz'] = 'image/svg+xml';
}
return $mimes;
});
/**
* Fix SVG display in Media Library
*/
add_action( 'admin_head', function() {
echo '<style>
.attachment-266x266 img[src$=".svg"],
img[src$=".svg"].thumbnail {
width: 100% !important;
height: auto !important;
}
</style>';
});
/**
* Ensure correct file type detection for SVG
*/
add_filter( 'wp_check_filetype_and_ext', function( $data, $file, $filename, $mimes ) {
$filetype = wp_check_filetype( $filename, $mimes );
if ( $filetype['ext'] === 'svg' ) {
$data['ext'] = 'svg';
$data['type'] = 'image/svg+xml';
}
return $data;
}, 10, 4 );