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

Hide the Slider  Controls
Published 18 October 2013

Hide the Slider Controls

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

Embedding a YouTube or Vimeo video in your slider
Published 14 October 2014

Embedding a YouTube or Vimeo video in your slider

Updated August 2015: Added an option to automatically loop youtube videos (default true) and code updated to work with Customizr-Pro 1.2+ and […]

Opening an external url in a pop-up window for a specific page
Published 26 September 2013

Opening an external url in a pop-up window for a specific page

To do that, you need : 1) The linked page ID (easy to find in the url when editing the page in […]

Reduce the height of the Slider
Published 22 October 2013

Reduce the height of the Slider

Customizr introduced built-in feature changes in v3.3. Go to Customize>Content>Front Page. Adjust the Set slider’s height in pixels setting. Also check the […]

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

© 2023 Press Customizr – All rights reserved