How to upload an SVG to WordPress safely

WordPress does not accept SVG uploads as it comes. SVG is left out of its list of allowed file types on purpose, because an SVG file can contain a script, and the media library answers with “Sorry, you are not allowed to upload this file type.” Older versions worded it “Sorry, this file type is not permitted for security reasons.” There are two sound ways to allow SVG: a plugin that cleans each file as it is uploaded, or a few lines of code that allow the type for administrators only. If the picture does not need to stay a vector, converting it to PNG avoids the question.

Why WordPress refuses SVG

A JPG or PNG is a grid of pixels and cannot do anything. An SVG is a text file in the same family as HTML. As well as shapes it may hold:

• a <script> element
• event attributes such as onload on any element
• links whose address begins with javascript:
• references to other files

None of that runs when the SVG is shown with an <img> tag or as a CSS background, where browsers draw it as a picture. It does run when the file is opened at its own address, or placed inline in a page. An uploaded file sits on the site’s own address, so a script in it would run with the same standing as the site’s own code, for whoever opens it. If that person is a logged-in administrator, the script can act as them.

So the danger is not SVG as such. It is letting people who are not fully trusted put SVG files on the site, and uploading files from unknown sources without looking inside.

The file types WordPress allows

WordPress checks an upload twice: the file’s ending must be on its list of allowed types, and the content must match the ending. The list of image types in the current source code is JPG, GIF, PNG, BMP, TIFF, WebP, AVIF, ICO and HEIC. SVG is not on it. The list can be changed through a filter named upload_mimes, which is what the methods below use.

Option 1: a plugin that sanitises SVG

A sanitising plugin adds SVG to the allowed types and rewrites each uploaded file, removing scripts and anything else outside a list of safe tags and attributes. The plugin directory at wordpress.org has several. Safe SVG is one example: its listing says it sanitises SVG files on upload, shows them in the media library, and can restrict which users may upload them.

This is the right choice when more than one person uploads to the site, or when files come from clients and stock libraries.

Option 2: allow SVG for administrators with code

A user-contributed note on the page for the upload_mimes filter in WordPress’s developer reference shows the same approach. This version allows SVG only for users who can manage the site’s settings, which by default means administrators:

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

Put it in a small plugin of your own or in a child theme’s functions.php file. It does not clean the files. It only lifts the block, so it is safe exactly as far as the administrators are careful about what they upload.

If the upload is still refused after this, the second check is the cause: the server has looked inside the file and not recognised it as SVG. Files that begin with an XML declaration are recognised more reliably. Open the SVG in a text editor and make this the first line:

<?xml version="1.0" encoding="UTF-8"?>

Optimisers often remove that line to save space, so a minified SVG is often the one refused.

What not to do

WordPress has a setting for wp-config.php named ALLOW_UNFILTERED_UPLOADS. It switches off the file type check for administrators altogether, for every kind of file. It makes the SVG error go away and removes a protection that has nothing to do with SVG. Use the filter above instead.

Check the file before uploading

Whichever option is used, look at what is being uploaded.

1. Open the file in the SVG viewer. It draws the SVG as a picture, in which scripts cannot run, and warns if the file contains a script element, text or linked images. The warning covers <script> elements only: look in the code box for event attributes such as onload and for javascript: links.
2. Read the code box. A file from a drawing program should hold shapes, groups and perhaps a <style> block or gradients. <script>, attributes beginning with on, and <foreignObject> have no business in a logo or an icon.
3. Run it through the SVG optimizer to strip editor data and shorten the numbers. Then add the XML declaration back if the server needs it.

After the upload

• No thumbnail or size. WordPress makes its smaller copies of pictures from pixels, and an SVG has none. The media library may show it without a preview or dimensions. Set a width on the image block, or in CSS, when it is placed.
• Give it a viewBox. An SVG with a viewBox scales to the width it is given. One without may be cropped or stay at a fixed size. SVG viewBox explained shows how to add one.
• It is an image, not inline code. Placed through the media library the SVG is shown with an <img> tag, so the theme’s CSS cannot recolour it. SVG in HTML explains the difference.

Using an SVG without uploading it

• Paste the code. The Custom HTML block takes SVG code typed or pasted into it, which also lets the theme’s CSS style the shapes. WordPress filters the HTML of users who are not allowed to post unfiltered HTML, and may strip the SVG for them.
• Put it in the theme. Files that are part of a theme are placed on the server, not uploaded through the media library, so the upload check does not apply. Logos and icons that never change belong there.
• Convert it. For a picture that is only ever shown at one size, SVG to PNG makes a PNG at any pixel size with a transparent background, and WordPress accepts it without any changes.

Common problems

What you see	Cause	Fix
“Sorry, you are not allowed to upload this file type.”	SVG is not an allowed type	Option 1 or Option 2
The same message after adding the filter	The content check did not recognise the file as SVG	Add the XML declaration as the first line
The message appears for an editor or author	The filter allows administrators only	Upload as an administrator, or use a plugin that sets who may upload
The SVG uploads but shows no preview	WordPress cannot make thumbnails of it	Normal. Some plugins add previews
The image is tiny, huge or cropped on the page	No width set, or no viewBox in the file	Set a width, and add a viewBox
Colours cannot be changed with CSS	The SVG is in an <img>	Place the code inline, or edit the colours in the file

Questions

Is it safe to allow SVG uploads? For files made by trusted people, or cleaned by a sanitiser, yes. Allowing every visitor or contributor to upload unchecked SVG files is not.

Does an SVG in an img tag run scripts? No. Browsers do not run scripts in an image. The risk is the file being opened directly at its own address.

Does the error mean something is wrong with the file? No. WordPress gives the same message for any type it does not allow.

What about a site on a hosted WordPress service? Hosts decide which plugins and code can be added. If neither option is available, convert the SVG to PNG.