Logo with animation flickers on start

Hi there,

Thanks for your support and using my plugin ??

I don’t think this is something related to my plugin… it must be the animation itself. I would have to test it in it’s environment. Maybe you could clone the site to a hosting account to test? or provide the animated SVG for me to test on my end.

Hi there, thanks to you for the plugin!

Well, it might be the code of the svg, or somethign going amiss with the plugin and the code. I opened a test account at Svgator, made a different animation, uploaded the svg after optimizing it (though your recommended link), and it was not showing the animation at all (Svgator embeds the style on the svg). I was puzzled as opening the logo url directly it shows the animation perfectly. So I tried disabling the plugin, and voilá, shows the animation and loads as it should be… Honestly, I’m puzzled! I’d like to keep the plugin active of course, but the behaviour is very weird.

I’m staging it here (using Divi), plugin is active right now, and the site faaaar from done: https://progboxstudio.com/sites/pbstest/

the logo alone: https://progboxstudio.com/sites/pbstest/wp-content/uploads/2019/09/logoPBS-svg-anim-svgator_opt.svg

Browser Cache is clear, and I have at the moment no cache plugin active.

Thanks for looking into this
(still having the white screen loading first, but that seems to come from somewhere else)

Oh, I just had the idea of unchecking the advanced mode, and voilá, it works.

except that is only animating on hard-refresh, not when refreshing normally or changing pages.. already sent a message to the people on Svgator.
I read that the solution would be to add the svg on <object> tags, but how to as a logo on WP? there I’m lost…

thanks for viewing on this issue!

Hi there,

ok, so the logo animates correctly when visited directly in the browser because it is rendered inline.

The best way to set this up is to separate the CSS and JS from the SVG and into their own files, enqueued as per WP standards.

Then the SVG needs to be rendered inline. This will require the “Advanced Mode” of my plugin to do this. The only other step will be to put the class in the logo SVG so that it can be targeted to swap with the inline SVG code. Here is the logo markup from your header, with the addition of the style-svg class added. You will likely need to add this class to the markup in your child theme’s header.php file.

<div class="logo_container">
	<span class="logo_helper"></span>
	<a href="https://progboxstudio.com/sites/pbstest/">
		<img src="https://progboxstudio.com/sites/pbstest/wp-content/uploads/2019/09/logoPBS-svg-anim-svgator_opt.svg" alt="Progbox Studio" id="logo" class="shadow svg-pbslogo style-svg" data-height-percentage="100" data-actual-width="299" data-actual-height="150">
	</a>
</div>

Looking at that code inside the IMG tags, it will all be replaced by the SVG code inline, so you will lose the alt tag and size attributes… but the size can be controlled using CSS anyway.

I hope this helps, let me know if anything isn’t clear.

Also, I’m not seeing the white before load in Brave/Chrome browsers today. And the animation only working on hard refresh would be because the browser sees it as the same image as last refresh and “expires headers” would be telling the browser it hasn’t changed yet so it just loads from cache unless you tell it to force reload all resources with a hard refresh.

• This reply was modified 5 years, 6 months ago by Benbodhi.

Hi, thanks for checking it up. Yeh I know the best way is to have it separated, but the SVG was generated like that. I’ll see if I can separate it myself then… (tedious thing not been a developer myself).

About the inline svg, if it was separated would work better, but at the moment, with all the long code is not the best way to do it, and besides, the animation stops when displaying inline. I’m using a class already to target the logo, still the animation won’t load, but static.

Thanks anyway for taking the time to see on this issue! SVG is still a field that needs to be explored much more and have much more support from all sides! You’re doing an awesome job! <3

Separating the CSS and JS is easy, the JS is inside the <script> tags and the CSS is inside the <style> tags. Put them in their own files. Then you just need to learn the enqueue function https://codex.www.ads-software.com/Plugin_API/Action_Reference/wp_enqueue_scripts

The animation isn’t stopping because it is displayed inline… But that’s your call. Separating the code properly will always work out better.

Your SVG will need to be animated so that it works in an IMG tag if you aren’t going to inline the SVG code itself.

You could possibly just embed the SVG directly into your header.php file… but that’s a quick and dirty way of doing it which I would avoid.

My pleasure, happy to help. I hope you can get it sorted.