Tiny MCE editor stripping xlink:href parameter from SVG USE tag

[*]

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

HTML:

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

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.