Creating a animated svg based on your site title

This snippet replaces your site title (or your logo if have uploaded one) an animated SVG images based on your site title.

View the demo »

The SVG format is partially supported by Internet Explorer, that’s why a CSS snippet has to be added to display a fallback html block for IE.

PHP code to add in function

add_filter('tc_logo_img_display' , 'my_svg_animated_logo' , 10 , 2);
function my_svg_animated_logo( $html, $filter_args ) {
    ?>
        <div class="<?php echo $filter_args['logo_class'] ?> svg-logo">
            <a href="<?php echo esc_url( home_url( '/' ) ) ?>" title="<?php echo esc_attr( get_bloginfo( 'description' ) ) ?>">
                <svg width="250" height="100">
                  <g transform="translate(0,0)"> 
                    <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:14px; visibility:hidden" fill="#483D65"> <?php echo esc_attr( get_bloginfo( 'name' ) )  ?>
                      <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s" dur="1s" fill="freeze" />
                      <animateMotion path="M 0 0 L 0 70" begin="0s" dur="1s" fill="freeze" />
                      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="0s" dur="1s" fill="freeze" /> 
                      <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="0s" dur="1s" fill="freeze" /> 
                    </text> 
                  </g>
                  No-support
                </svg>
            </a>
        </div>
        <div class="logo-fallback">
         <?php echo $html ?>
        </div>
    <?php
}

add_filter('tc_logo_text_display' , 'my_svg_animated_text' , 10 , 2);
function my_svg_animated_text( $html, $logo_class ) {
    ?>
    <div class="<?php echo $logo_class ?> svg-logo pull-left">
        <a href="<?php echo esc_url( home_url( '/' ) ) ?>" title="<?php echo esc_attr( get_bloginfo( 'description' ) ) ?>">
            <svg width="250" height="100">
              <g transform="translate(0,0)"> 
                <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:14px; visibility:hidden;" fill="#483D65"> <?php echo esc_attr( get_bloginfo( 'name' ) )  ?>
                  <set attributeName="visibility" attributeType="CSS" to="visible" begin="0s" dur="1s" fill="freeze" />
                  <animateMotion path="M 0 0 L 0 70" begin="0s" dur="1s" fill="freeze" />
                  <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="0s" dur="1s" fill="freeze" /> 
                  <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="0s" dur="1s" fill="freeze" /> 
                </text> 
              </g>
               No-support
            </svg>
        </a>
    </div>
    <div class="logo-fallback">
         <?php echo $html ?>
    </div>
    <?php
}

add_filter('tc_logo_img_display' , 'my_svg_animated_logo' , 10 , 2);

function my_svg_animated_logo( $html, $filter_args ) {

<a href="<?php echo esc_url( home_url( '/' ) ) ?>" title="<?php echo esc_attr( get_bloginfo( 'description' ) ) ?>">

</text>

</g>

No-support

</svg>

</a>

</div>

<?php echo $html ?>

</div>

<?php

}

add_filter('tc_logo_text_display' , 'my_svg_animated_text' , 10 , 2);

function my_svg_animated_text( $html, $logo_class ) {

<a href="<?php echo esc_url( home_url( '/' ) ) ?>" title="<?php echo esc_attr( get_bloginfo( 'description' ) ) ?>">

</text>

</g>

No-support

</svg>

</a>

</div>

<?php echo $html ?>

</div>

<?php

}

Where to paste this code? => in your functions.php file. I strongly recommend to create a child theme. Download a start-up child theme here.

Everything you need to know about child theme with Customizr here.

CSS code to manage the IE fallback

Add this code in the Custom CSS or the stylesheet of your child theme.

.ie .logo-fallback, .brand.svg-logo {
display: block;
}

.ie .brand.svg-logo, .logo-fallback {
display: none;
}

.ie .logo-fallback, .brand.svg-logo {

display: block;

}

.ie .brand.svg-logo, .logo-fallback {

display: none;

}

Further readings :

Get started with SVG images

PHP code to add in function

CSS code to manage the IE fallback

Related Snippets you may also like