I have an inline SVG tag with an embedded <USE> tag.


   <li><svg class="icon-user"><use xlink:href="#icon-user"></use></svg> My Account</li>

I have created a filter function to force the Tiny MCE editor to leave SVG tags alone. The code was adapted from post: use of <svg> tag into wordpress.

Filter function:

add_filter( 'tiny_mce_before_init', 'fb_tinymce_add_pre' );
function fb_tinymce_add_pre( $initArray ) {

   // Command separated string of extended elements
   $ext = 'svg[preserveAspectRatio|class|style|version|viewbox|xmlns],defs,use[xlink:href|x|y],linearGradient[id|x1|y1|z1]';

    if ( isset( $initArray['extended_valid_elements'] ) ) {
        $initArray['extended_valid_elements'] .= ',' . $ext;
    } else {
        $initArray['extended_valid_elements'] = $ext;
    // maybe; set tiny paramter verify_html
    //$initArray['verify_html'] = false;

    return $initArray;

I adapted the posted solution to add SVG CLASS, the USE tag and its XLINK:HREF, X and Y parameters.

Problem is the xlink:href parameter is being miss-interpreted resulting in code butchery upon switching to VISUAL mode in the editor.

HTML before switch to visual mode:

     <svg class="icon-user"><use xlink:href="#icon-user"></use></svg>

HTML after switch to visual mode:

     <svg class="icon-user"><use xlink="href"></use></svg>

I have tried escaping the colon in the xlink:href function parameter like this: xlink\:href, tried an encoded value for the colon like this: xlink%3Ahref and using quotes around it like this "xlink:href" but all failed.

I know you can embed svg using HTML5 markup, but I would like to try this method if I can get a solution that sticks.

2 Answers 2


Unfortunately the colon is a TinyMCE control character

Forces the attribute to the specified value. For example, 'border:0'

...hence the switch to xlink=href. The only apparent solution is the wildcard use[*]

Use the control character ? which "separates attribute verification values" i.e. use[xlink?href]

  • That's works a treat but gives a lot of freedom to page editors to code other <use> tag parameters the site owner might not have wanted. Lucky for me that wasn't the case. Thanks Commented Aug 4, 2018 at 0:12
  • 2
    BTW. Using your suggestion and your link I found use[xlink?href] worked too and gave benefit of controlling parameters allowed. Commented Aug 4, 2018 at 0:21
  • Completely missed that! Updated answer. Commented Aug 7, 2018 at 10:47

You can used js for added in the beginning of the line

$(document).ready(function () {
    $("li").prepend('<svg class="icon-user"><use xlink:href="#icon-user"></use></svg>');

Or assign a class to the li tag

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.