SVG with encapsulated GSAP in WordPress

[J Atkinson]

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.

 

Thanks.

 

Janet

[Jonathan]

Hello J Atkinson,

 

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

 

Thanks!

[J Atkinson]

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

 

 

Thanks!

[J Atkinson]

For your reference, here's the codepen 

See the Pen 1078b6af42e7ab6837f46c4ca3d0b7a9 by atkinson (@atkinson) on CodePen

[Jonathan]

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>

• Through a image tag or background-image reference. https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image

<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.

 

Resource:

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

[J Atkinson]

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.

 

Janet

[Jonathan]

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 :

 

http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

 

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.

 

[J Atkinson]

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.  

[Jonathan]

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!