Jump to content

J Atkinson

SVG with encapsulated GSAP in WordPress

Recommended Posts

Hello All,


I successfully created a self contained SVG ad banner with Tween Max as per Chris Gannon's fantastic tutorial https://www.youtube.com/watch?v=S6P_N2JWSrc


(Thanks Chris!)


My test works in the browser but not in WordPress. 


Has anyone found a way to get WordPress to play nice with self contained SVGs?


This would be an ideal way to deliver ads to WordPress clients without needing to supply all dependencies.





Link to comment
Share on other sites

Hello J Atkinson,


Do you have a SVG code example so we can see the code you are trying to include in WordPress?


Thanks! :)

  • Like 1
Link to comment
Share on other sites

Here's the file. Note: It's a text file since I could not upload here as SVG.




Link to comment
Share on other sites

I see a couple of ways, Either include directly into the HTML or post/page content:

  • If you just want to include the SVG file than just include it in your content like any other html through a post or page wordpress content. (minus the script tag, include that at the bottom of your page)
  • Or include through a php page via wordpress theme file

If you are including the file to be self contained and have all your guts inside the SVG file

  • Than you could include via an iframe tag, with the source attribute (src) .. but that you will have to add the xml namespace tag so the SVG file can be rendered right.
<iframe src="image.svg">Your browser does not support iframes</iframe>
<img src="image.svg" />
#myElement {
     background-image: url(image.svg);

Just make sure if you include directly into your html within wordpress, to not include GSAP via wordpress enqueue_script, since your SVG file will be already including it. But if you just reference your SVG file than just treat the SVG as an image and display via a image tag or iframe.



MDN SVG in HTML: https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction

W3C SVG HTML: http://dev.w3.org/SVG/proposals/svg-html/svg-html-proposal.html


I hope this helps

Link to comment
Share on other sites

Thanks for your reply.


Here is a live test. http://janetatkinson.com/work/svg-test/

Note: TweenMax is not loaded on this page.


1. Placed as iframe: (This works)


2. SVG uploaded as an image (Doesn't work.)


3. As a background image (Doesn't work)


It would be ideal to get #2 to work. I would just send the file and client uploads to WordPress, no fuss.


Thanks for taking a look at this.



Link to comment
Share on other sites

When you tried the SVG through an img tag and or background-image.. was it loading the SVG file from the same domain?


I believe if you want an interactive SVG than you might have to stick with either an <iframe> or <object> tag. But i would go with the <iframe> tag for a better cross browser solution.


SMIL animation will play through an IMG tag but SMIL animation is not widely supported in all modern browsers


Based on SVG & HTML spec :




But if its going on your site i would just load GSAP though WordPress and then just place your SVG like your HTML, for a more trouble free solution.



Link to comment
Share on other sites

Hi Jonathan,


Yes, the SVGs are loading from the same domain.


Too bad there isn't a way to use a fully encapsulated animated SVG with the image tag in WordPress.


This would be ideal for handing off assets to a client or agency.  

Link to comment
Share on other sites

I believe that interactive svg within an image tag, might just be the way they work for now in Modern Browsers, not just in WordPress. There are some other forum topics in the forum that discuss that very same thing about encapsulating SVG for ad banner delivery. But i can not remember which posts they are in. But if you do go that route on your website than either having it in an iframe or just output the SVG on your page. Treating the SVG as any other DOM node to animate with GSAP:


Happy Tweening! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.