use of <svg> tag into wordpress

Question

Hi i'm trying to upload a svg map to my wordpress website.

I fixed all to be able to upload svg trough the media gallery but then when i try to write the tag into the page it won't recognize it. I can only use it embedding it into a tag... but i can't do that cause i need to work with some svg effect like hover, clicking and so on...

pretty much i would need a way to insert the whole code with the path and so on, into my page... how to do that?

Answer 1

I think that WordPress currently not allow the svg tag in his editor. But you can change this, see this answer for more hints, background.

I think the follow small source should help you to allow this tag and his attribute. Copy in a plugin (add a plugin header) and activate. But I think, that you enhanced the tags and his attribute. svg use a lot of tags, attributes if I see this example.

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

    // Comma separated string od extendes tags
    // Command separated string of extended elements
    $ext = 'svg[preserveAspectRatio|style|version|viewbox|xmlns],defs,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;
}