Allow SVG File Uploads in WordPress Media Library

WordPress blocks SVG uploads to the media library by default (“Sorry, you are not allowed to upload this file type”). To allow SVG uploads, add the SVG MIME type with the upload_mimes filter and limit it to trusted users.

The limit matters, because an SVG file can carry JavaScript that runs on your domain.

To paste SVG code straight into post content, see allow inline SVG in the WordPress content editor.

Allow SVG Uploads in functions.php

Add this code to your child theme’s functions.php or to a small custom plugin:

function cc_mime_types( $mimes, $user = null ) {
    $can_upload_svg = $user ? user_can( $user, 'unfiltered_html' ) : current_user_can( 'unfiltered_html' );

    if ( $can_upload_svg ) {
        $mimes['svg'] = 'image/svg+xml';
    }

    return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types', 10, 2 );

How It Works

upload_mimes filters the list of file extensions and MIME types WordPress accepts. The line $mimes['svg'] = 'image/svg+xml'; adds SVG to that list.

The capability check is the part most snippets leave out.

unfiltered_html is the permission to publish raw HTML and JavaScript, and WordPress core uses the same check before it allows .html and .js uploads. On a single site, Administrators and Editors have it. On multisite, only Super Admins do.

Users with that capability can already add scripts to posts, so an SVG upload gives them nothing new. Authors still can’t upload SVG files.

SVG Security: Restrict or Sanitize

An SVG can contain <script> tags and event handlers such as onload.

Scripts don’t run when the SVG is shown in an <img> tag or as a CSS background. They do run when someone opens the file URL directly, and that opens the door to cross-site scripting (XSS) on your domain.

You have two safe options:

• Restrict uploads to trusted users, as the snippet above does.
• Sanitize every SVG on upload so scripts and dangerous attributes are removed. The Safe SVG plugin by 10up does this with the svg-sanitizer library, and lets you choose which roles may upload SVG files.

If lower roles, clients or a front-end form need to upload SVG files, use sanitization. Adding svg to upload_mimes for every user without sanitizing is the setup to avoid.

Still Getting “Not Allowed to Upload This File Type”?

Since WordPress 4.7.1, the extension alone is not enough. When PHP’s fileinfo extension is available, WordPress also reads the file contents, and for SVG it only accepts the file when fileinfo reports image/svg+xml.

Most exported SVG files pass.

On PHP 8.3, for example, files that begin with <svg or <?xml are detected correctly, but a file that begins with an HTML comment or blank lines is detected as text/plain and rejected.

Open such a file in a text editor and remove anything before the opening tag.

Also check that you are logged in with a role that has unfiltered_html, and that a security plugin isn’t blocking the type. For other upload errors, see troubleshooting image upload errors in WordPress.

WordPress doesn’t create thumbnail sizes for SVG files and stores no width or height for them, so set the display size in CSS or in the block settings.

For adding other file types the same way, see how to enable the upload of additional file types in WordPress.

FAQs

Common questions about SVG uploads in WordPress: