README

Enable SVG uploads and sanitize them to stop XML/SVG vulnerabilities in your WordPress website.

Overview

Safe SVG is the best way to Allow SVG Uploads in WordPress!

It gives you the ability to allow SVG uploads whilst making sure that they're sanitized to stop SVG/XML vulnerabilities affecting your site. It also gives you the ability to preview your uploaded SVGs in the media library in all views.

Current Features

• Sanitised SVGs - Don't open up security holes in your WordPress site by allowing uploads of unsanitised files.
• SVGO Optimisation - Runs your SVGs through the SVGO tool on upload to save you space. This feature is disabled by default but can be enabled by adding the following code: add_filter( 'safe_svg_optimizer_enabled', '__return_true' );
• View SVGs in the Media Library - Gone are the days of guessing which SVG is the correct one, we'll enable SVG previews in the WordPress media library.
• Choose Who Can Upload - Restrict SVG uploads to certain users on your WordPress site or allow anyone to upload.

Initially a proof of concept for #24251.

SVG Sanitization is done through the following library: https://github.com/darylldoyle/svg-sanitizer.

SVG Optimization is done through the following library: https://github.com/svg/svgo.

Technical: Upload Path Security

WordPress’s _wp_handle_upload( $file, $action ) function allows any $action value, which determines the filter hook name: {$action}_prefilter. Safe SVG hooks common actions like wp_handle_upload and wp_handle_sideload, but cannot hook arbitrary custom actions defined by third-party code. Since upload actions are unbounded and MIME allowances are global, we cannot guarantee sanitization coverage across all possible upload paths.

Requirements

• PHP 7.4+
• WordPress 6.6+

Installation

Install through the WordPress directory or download, unzip and upload the files to your /wp-content/plugins/ directory.

Frequently Asked Questions

Can we change the allowed attributes and tags?

Yes, this can be done using the svg_allowed_attributes and svg_allowed_tags filters. They take one argument that must be returned. See below for examples:

add_filter( 'svg_allowed_attributes', function ( $attributes ) {

    // Do what you want here...

    // This should return an array so add your attributes to
    // to the $attributes array before returning it. E.G.

    $attributes[] = 'target'; // This would allow the target="" attribute.

    return $attributes;
} );


add_filter( 'svg_allowed_tags', function ( $tags ) {

    // Do what you want here...

    // This should return an array so add your tags to
    // to the $tags array before returning it. E.G.

    $tags[] = 'use'; // This would allow the  element.

    return $tags;
} );

Can my theme style an inline SVG?

Mostly, yes. The Inline SVG block renders an SVG that carries its own