Skip to content
Back Home
  • Nimble Builder Pro
  • Customizr Pro
  • Hueman Pro
  • Blog
  • Search
Back Home
  • Nimble Builder Pro
  • Customizr Pro
  • Hueman Pro
  • Blog
Home » Snippets » WordPress functions » add_filter() » Creating a animated svg based on your site title
code snippets css html php svg Logo Title tc_logo_img_display tc_logo_text_display add_filter()

Creating a animated svg based on your site title

by Press Customizr|Published 17 January 2014

 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
}

 

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;
}

 

Further readings :

Get started with SVG images

AUTHOR

Press Customizr
Hi! Our team is working everyday to help you publish your WordPress content the best possible way. :) Thanks for visiting our website. You can also visit our knowledge base.
357 posts

You may also like

Removing the Help and Customiz’it admin bar buttons
Published 7 November 2013

Removing the Help and Customiz’it admin bar buttons

Update : the Customiz’it button has been removed since v3.1.12 of the theme   Howdy developer! Even if I have tried to style […]

Change the size of the Social Icons
Published 15 October 2013

Change the size of the Social Icons

Where to copy/paste this code? The simplest way is to use the Custom CSS section of the customizer option screen. If you […]

Removing the title links in post lists
Published 12 August 2014

Removing the title links in post lists

The Customizr theme displays by default your post titles as links pointing to the single post. Here’s a simple way (using some […]

Remove Navbar Box
Published 22 October 2013

Remove Navbar Box

Customizr introduced built-in feature changes in v3.3. Go to Customize>Header>Design and layout. Uncheck the box Display menu in a box. 3.1/3.2 code […]

Impress your visitors with a perfect experience on smartphones

customizr-pro-screenshot

10K+ small businesses are already using the Customizr Pro WordPress theme for their online presence.

Discover Customizr Pro

About us

At presscustomizr.com we create popular freemium WordPress themes and plugins used by more than 150,000 websites worldwide, with a focus on simplicity and ease of use.

Our themes Customizr and Hueman are among the most popular and highly rated on wordpress.org, and regularly short listed by bloggers as some of the bests in the WordPress industry.

Post navigation

  • Previous post Adding a secondary button to the slider in pure javascript
  • Back to post list
  • Next post Displaying the post metas on home page

By continuing to use this site you consent to the use of cookies in accordance with our cookie policy.

Useful pages
  • Your account
  • Product Support
  • Documentation
  • Customizr theme release notes
  • Hueman theme release notes
Company
  • About
  • Blog
  • Privacy Policy
  • Terms of sale
  • Contact Us
Products and Services
  • Nimble Builder Pro
  • Customizr Pro theme
  • Hueman Pro theme
  • Customizr Theme
  • Hueman Theme

© 2025 Press Customizr – All rights reserved