SVG image upload stopped working

Question

I have a client website that has the mime type support for SVG's added in the functions file. We've been uploading svg's for over a year. Suddenly it stopped working and is showing the "for security reasons this file is not allowed" - I'm stumped on what to check next to try and debug it.

Answer 1

By default, WP does not allow SVG uploads, and you should get that error. Preventing SVG uploads is a security feature (which I explain below). I can't help you debug your function, because that is beyond my expertise, but I can suggest a work around.

You can use a plugin like SafeSVG (https://wordpress.org/plugins/safe-svg/) to enable SVG, but use caution: it exposes you to risks. SVG files can be used as a way of taking over control of your site. If you install the plugin and enable SVG upload you should be able to restore your ability to upload the SVGs. However, I recommend, for security reasons you restrict access to the plugin to the administrator in your functions.php file. If you have users that have upload capacities, they could hack/corrupt/compromise your site with SVGS, so be careful!

UPDATE 1: Because of your question, I just discovered that even safeSVG (which I had been using) stopped working. It seems that SVG upload (an maybe even upload of some other file types) has been broken by the recent WP 4.7.1 update. There is a discussion about it here: https://wordpress.org/support/topic/wp-4-7-1-kills-svg/

There are a number of solutions in that discussion, and some appear to be safer than others. I haven't tested them though. It is a start. I'm glad I ran across your question. Thanks!

UPDATE 2: Here is a plugin that a commenter below suggested to temporarily allow this, but I cannot vouch for the safety: https://wordpress.org/plugins/disable-real-mime-check/

Answer 2

In your theme functions.php file :

/**
 * Add svg MIME type support
 *
 * @param $mimes
 *
 * @author fadupla
 * @return mixed
 */
function fadupla_mime_types( $mimes ) {
    $mimes['svg'] = 'image/svg+xml';

    return $mimes;
}

add_filter( 'upload_mimes', 'fadupla_mime_types' );

/**
 * Enqueue SVG javascript and stylesheet in admin
 * @author fadupla
 */

function fadupla_svg_enqueue_scripts( $hook ) {
    wp_enqueue_style( 'fadupla-svg-style', get_theme_file_uri( '/assets/css/svg.css' ) );
    wp_enqueue_script( 'fadupla-svg-script', get_theme_file_uri( '/assets/js/svg.js' ), 'jquery' );
    wp_localize_script( 'fadupla-svg-script', 'script_vars',
        array( 'AJAXurl' => admin_url( 'admin-ajax.php' ) ) );
}

add_action( 'admin_enqueue_scripts', 'fadupla_svg_enqueue_scripts' );


/**
 * Ajax get_attachment_url_media_library
 * @author fadupla
 */
function fadupla_get_attachment_url_media_library() {

    $url          = '';
    $attachmentID = isset( $_REQUEST['attachmentID'] ) ? $_REQUEST['attachmentID'] : '';
    if ( $attachmentID ) {
        $url = wp_get_attachment_url( $attachmentID );
    }

    echo $url;

    die();
}

add_action( 'wp_ajax_svg_get_attachment_url', 'fadupla_get_attachment_url_media_library' );

the assets/js/svg.js file :

var mediaGridObserver = new MutationObserver(function (mutations) {

    for (var i = 0; i < mutations.length; i++)
    {

        for (var j = 0; j < mutations[i].addedNodes.length; j++)
        {
            element = $(mutations[i].addedNodes[j]);

            if (element.attr('class'))
            {
                elementClass = element.attr('class');
                if (element.attr('class').indexOf('attachment') != -1)
                {

                    attachmentPreview = element.children('.attachment-preview');
                    if (attachmentPreview.length != 0)
                    {
                        if (attachmentPreview.attr('class').indexOf('subtype-svg+xml') != -1)
                        {
                            var handler = function (element) {

                                jQuery.ajax({

                                    url: script_vars.AJAXurl,
                                    type: "POST",
                                    dataType: 'html',
                                    data: {
                                        'action': 'svg_get_attachment_url',
                                        'attachmentID': element.attr('data-id')
                                    },
                                    success: function (data) {
                                        if (data)
                                        {
                                            element.find('img').attr('src', data);
                                            element.find('.filename').text('SVG Image');
                                        }
                                    }
                                });

                            }(element);

                        }
                    }
                }
            }
        }
    }
});

var attachmentPreviewObserver = new MutationObserver(function (mutations) {
    for (var i = 0; i < mutations.length; i++)
    {
        for (var j = 0; j < mutations[i].addedNodes.length; j++)
        {
            var element = $(mutations[i].addedNodes[j]);
            var onAttachmentPage = false;
            if ((element.hasClass('attachment-details')) || element.find('.attachment-details').length != 0)
            {
                onAttachmentPage = true;
            }

            if (onAttachmentPage == true)
            {
                var urlLabel = element.find('label[data-setting="url"]');
                if (urlLabel.length != 0)
                {
                    var value = urlLabel.find('input').val();
                    element.find('.details-image').attr('src', value);
                }
            }
        }
    }
});

$(document).ready(function () {

    mediaGridObserver.observe(document.body, {
        childList: true,
        subtree: true
    });

    attachmentPreviewObserver.observe(document.body, {
        childList: true,
        subtree: true
    });


});

the assets/css/svg.css file :

img[src*='.svg'] {
    width: 100%;
    height: auto;
}