How to Add & Animate Your SVG Logo Inside Your Global Header with Divi’s Theme Builder & Anime.js

Last Updated on September 16, 2022 by 7 Comments

How to Add & Animate Your SVG Logo Inside Your Global Header with Divi’s Theme Builder & Anime.js
Blog / Divi Resources / How to Add & Animate Your SVG Logo Inside Your Global Header with Divi’s Theme Builder & Anime.js
Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

How to Add Dynamic Links to Divi Button Modules

How to Add Dynamic Links to Divi Button Modules

Posted on September 26, 2023 in Divi Resources

The Divi Button Module offers many design options, enabling great freedom when crafting attractive links in your designs. Whether you’re altering the background color or adding a box shadow, your creative possibilities are endless. This isn’t limited to the standard Button Module; it...

View Full Post
Get a Free Book Store Layout Pack for Divi

Get a Free Book Store Layout Pack for Divi

Posted on September 25, 2023 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful Book Store Layout Pack that’ll help you get your next Book Store website...

View Full Post
Divi Product Highlight: Divi Layouts Extended

Divi Product Highlight: Divi Layouts Extended

Updated on September 25, 2023 in Divi Resources

Divi Layouts Extended is a third-party product for Divi that includes over 1700 layouts that are imported through a custom dashboard. They cover a wide range of genres and include modules, sections, and complete pages. In this post, we’ll look at Divi Layouts Extended to help you decide if...

View Full Post

7 Comments

  1. About Secure SVG:
    “Why SVG Security is Important
    The reason SVG is not part of WordPress core yet is that there are security concerns to be addressed. You can follow the active discussion about SVGs in WordPress core (#24251) which was started back in 2013. SVG is an XML file, which by itself opens it up to different vulnerabilities of which normal image formats aren’t affected. These include XML external entity attacks (XXE), bomb nested entities, and XSS attacks.

    Mario Heiderich published an insightful presentation about the security risks due to active content injection with SVG files. One example given was that JavaScript was embedded in an SVG and it actually managed to call Mario on Skype. That is kind of scary! SecuPress, authors of a WordPress security plugin, also touched on the subject of being careful when adding SVGs to WordPress, and the importance of doing it the right way.

    Many SVG plugins on the repository are utilizing the following code, which simply enables the MIME type to allow uploading of SVGs to the WordPress media library. This is not the safe way to do this! So don’t go and just download the first free SVG plugin you see or copy paste this code and think your good to go.”

    Brian Jackson – How to Safely Enable WordPress SVG Support (2 Simple Clicks) (Kinsta Blog)

  2. Do you think by using Javascript that it may slow down page speed, especially since it’s happening at the top of the page?

  3. Hi, Donjete Vuniqi

    Thank you very much for this tutorial!
    Now I created my first SVG logo!

    PS. One little thing in the text.
    You wrote about; ‘We’re generating a bottom overlap as well by modifying the spacing settings…
    and there the text should be … Top Margin: 5% … and …Bottom Margin:…’ as correctly shown in the image ; )

  4. This is great! My only question is will this create a risk of security breech? I read somewhere that SVG files can cause issues with the security of one’s site and make it more vulnerable for attack. Is this true?

  5. Thank you Donjetë, We have always wanted more in terms of how the logos should be presented whenever we design for our clients’ websites. With this new addition to our design toolbox, my agency will produce more beautiful looking websites for our clients.

  6. Love that tutorial. Thanks for walking through how to create that. I want to implement that on my own site and a few others that I’ve done the branding for. The SVG animation looks like it works really well for simple icons. Do you think it would get overwhelming if using it on longer names?

    • YES — the svg code gets really long and involved, especially if you have things that aren’t primitive shapes (eg rounded rectangles vs a circle). While this tutorial is super for a simple, 2 element graphic, it doesn’t give enough direction for how to modify the animation code if you have more involved logos.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today