Inline SVG Disappears When Switching Between Editing Modes

Okay.. you have some pretty funky attributes there.

I’m not exactly sure why it’s not working now, as opposed to before. With the new editor; the changes by TinyMCE; the changes by WP; it’s hard to tell anymore what changed and why.

But, here is your solution. You will need to add this to your functions (preferably in a child theme):

function allow_all_tinymce_elements_attributes( $init ) {

    // Allow all elements and all attributes
    $ext = '*[*]';

    // Add to extended_valid_elements if it already exists
    if ( isset( $init['extended_valid_elements'] ) ) {
        $init['extended_valid_elements'] .= ',' . $ext;
    } else {
        $init['extended_valid_elements'] = $ext;
    }

    // return value
    return $init;
}
add_filter('tiny_mce_before_init', 'allow_all_tinymce_elements_attributes');

What that does.. is tells tinymce to allow all elements with all attributes. We could have refined it some; if you didn’t have those :'s in the attribute names… but, there you go.

This page may help explain a little more.

Hi Josh,

Thanks for the quick response!

Unfortunately it didn’t work for me. I put it in the bottom of my functions.php file and I still get the same behavior. Here is a little gif screencast of the problem:

https://recordit.co/OBz3bSvspr

Any ideas? The “weird” attributes for <svg> elements are standard attributes for them.

Thanks for the screencast!! Very nice! But… there is always a but ;)… I was able to take your example above and test it myself.

I could see, indeed, it was being stripped right out of there.

But, after writing the function above.. I was able to retain the entire structure.

To what file exactly did you add the code?

You may need to manually empty your broser cache, or a site plugin cache if you’re using one.

If that still doesn’t work.. make a screencast of where you are adding the code ??

Hi Josh,

I placed your code in the bottom of my theme’s functions.php file. I created the theme using underscores.me.

I also copied just the snippet of the svg code (as in what I said in my first message) and tried that, and yes it worked.

However, the problem is that the actual svg is a really big complex graphic and has lots of elements inside of it – and WordPress doesn’t like something about it. It contains <rect>s, <circle>s, <path>s, <g>s, etc.

Here’s a screenshot of both the small snippet and the big one. You can see the big one still doesn’t work.

I did some testing by removing individual elements, but if I leave anything inside the <svg> tags, WordPress removes the whole thing.

Here’s a link to the raw svg code.

Any idea how to get WordPress to ignore everything inside the <svg> tags?

Perfect. Seems you have a little experience in support forums ?? Thanks for the very detailed, concise links and explanation!

I’ll look at this directly after dinner ?? Please post back in an hour if I have not replied.

I’m not sure if there is much else we can do… as the function I provided is supposed to all ALL elements and ALL attributes.

But, I’ll do a little more experimenting.

Talk to you soon!

Hi Josh,

Any luck with a solution? Maybe TinyMCE doesn’t like <g> or <rect> or <circle> elements, or it doesn’t like self-closing elements?

Is there an alternative to TinyMCE that I could try?

Thanks!

I haven’t found any solution to permanently fix this, but I did turn off the Visual mode as a temporary fix by using this code in my functions.php file for the pages where I am using SVGs:

add_filter( 'user_can_richedit', 'disable_my_richedit' );
function disable_my_richedit( $default ) {
    global $post;
    if ( in_array( $post->ID, array(432, 10) ) ) // change the post ID
        return false;
    return $default;
}

I found the solution here.

My clients don’t mind that much but it would be nice to get Visual mode back at some point.

Thanks for your help!

Nice to see that this problem is happening to others too.. Thought I was going crazy. And thanks for the temp fix @bhammie85. I’m guessing the route I’ll take is to setup my SVG’s into a shortcode and have the shortcode call in all the crazy SVG stuff from the functions.php I’ll let you know how it goes!