Allow Inline SVG in WordPress Content Editor

Is inline SVG allowed in WordPress post content by default? Partly. WordPress saves inline <svg> markup only for users with the unfiltered_html capability, and the Classic editor’s Visual tab strips it for everyone.

The steps below are for pasting SVG code (<svg>, <path>, <rect> and so on) straight into the editor. To upload SVG files to the media library instead, see allow SVG file uploads in WordPress.

Allow Inline SVG in the Classic Editor (TinyMCE)

TinyMCE, the editor behind the Classic editor and the Classic block, removes any element that isn’t in its HTML5 schema, and SVG elements aren’t. Add this code to your child theme’s functions.php to stop it:

function override_mce_options( $initArray ) {
    $opts = '*[*]';
    $initArray['valid_elements']          = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'override_mce_options' );

How It Works

tiny_mce_before_init filters the settings array WordPress passes to TinyMCE before the editor loads. WordPress applies it to the Classic editor and to the Classic block in the block editor.

valid_elements tells TinyMCE which tags and attributes to keep. The value *[*] means any element with any attribute, so SVG markup survives when you switch between the Visual and Text tabs.

Note that *[*] turns off TinyMCE’s element filtering for all tags, not only SVG.

TinyMCE lowercases viewBox to viewbox. That is harmless, because the browser’s HTML parser restores the correct case for inline SVG.

What WordPress Saves: unfiltered_html and KSES

The TinyMCE setting only changes the editor in the browser. What ends up in the database is decided on the server by KSES, WordPress’s HTML filter:

• Administrators and Editors on a single site have unfiltered_html. Their content isn’t filtered, so inline SVG is saved as written.
• Authors and Contributors don’t have it. KSES strips <svg>, <path> and the other SVG tags on save, whatever the editor shows.
• On multisite, only Super Admins have unfiltered_html. Setting DISALLOW_UNFILTERED_HTML to true in wp-config.php removes it from everyone.

In the block editor, the Custom HTML block follows the same rule. You don’t need the TinyMCE filter for it, since that block doesn’t use TinyMCE, but users without unfiltered_html still lose the SVG when the post is saved.

Allow Safe SVG Tags for Authors and Contributors

If users without unfiltered_html need simple inline icons, add the SVG elements and attributes to the KSES allowlist for post content. Anything not listed, such as <script> tags and onload attributes, is still removed:

function savvy_allow_inline_svg( $tags, $context ) {
    if ( 'post' !== $context ) {
        return $tags;
    }

    $tags['svg'] = array(
        'xmlns'       => true,
        'viewbox'     => true,
        'width'       => true,
        'height'      => true,
        'fill'        => true,
        'class'       => true,
        'role'        => true,
        'aria-hidden' => true,
        'aria-label'  => true,
        'focusable'   => true,
    );
    $tags['g']      = array( 'fill' => true, 'stroke' => true, 'transform' => true );
    $tags['title']  = array();
    $tags['path']   = array( 'd' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true, 'stroke-linecap' => true, 'stroke-linejoin' => true, 'fill-rule' => true, 'clip-rule' => true, 'transform' => true );
    $tags['circle'] = array( 'cx' => true, 'cy' => true, 'r' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true );
    $tags['rect']   = array( 'x' => true, 'y' => true, 'width' => true, 'height' => true, 'rx' => true, 'ry' => true, 'fill' => true, 'stroke' => true, 'stroke-width' => true );

    return $tags;
}
add_filter( 'wp_kses_allowed_html', 'savvy_allow_inline_svg', 10, 2 );

Attribute names go in lowercase (viewbox), because KSES compares them in lowercase. Keep the list short and avoid allowing <use>, <foreignObject>, href or style unless you need them.

FAQs

Common questions about inline SVG in the WordPress editor: