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. SettingDISALLOW_UNFILTERED_HTMLtotrueinwp-config.phpremoves 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:
unfiltered_html capability (Administrators and Editors on a single site), and only in the Code editor, Text tab or Custom HTML block. For other roles, WordPress strips the SVG on save.
valid_elements to *[*] with the tiny_mce_before_init filter.
unfiltered_html, which also lets them add scripts. Allow a short list of SVG tags and attributes through wp_kses_allowed_html instead, so KSES keeps removing scripts and event handlers.
