Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sousinho

SVG Tags in DFP not supported.

Recommended Posts

Hey Guys,

 

I've created a bunch of ads which have SVG tags with DisplacementMap to give the illusion of moving 'northern lights'

 

This has been fine for most adservers but apparently DFP don't support SVG tags.  The other workaround is to create background image steps, but i fear this will create quite a large ad.  

 

I could create a video but im pretty much sure that won't be accepted.  GIF will also be to large. 

 

Any ideas?  

 

Thanks!

 

 

Link to comment
Share on other sites

Hello sousinho and welcome to the GreenSock Forum!

 

Do you have a code example with what you have or a limited code example with what you have so we can see if we can offer other solutions based on the effect your your doing.

 

Here is a video tut on how to create a codepen demo example:

 

 

Much appreciated, Thanks! :)

Link to comment
Share on other sites

Thanks for getting back to me.   

 

No problem.  here is the pen

 

See the Pen jAoZQB by sousinho (@sousinho) on CodePen

 

I've usually dealt with this by removing the animation or just having a background image yoyo.  be nice to see if there is a solution that doesn't require SVG tags.

 

Thanks!

 

Roy

Link to comment
Share on other sites

Hey @sousinho - have you seen this post? You might be missing some info in your svg tag. Also, check that your svg tags aren't malformed. Hope that helps!

  • Like 3
Link to comment
Share on other sites

What about using canvas to create the displacement map, and overlay the canvas tag over your image?

 

http://www.soundstep.com/blog/2012/04/25/javascript-displacement-mapping/

 

Does DFP support using canvas?

 

Note that you can't use CSS Filters due to lack of support and there really is not an equivalent for displacement filter for SVG :(

 

:)

  • Like 1
Link to comment
Share on other sites

Hey Fly!  

 

Damn, that did the job in validator...  I guess if it works on validator it should be fine for DFP.  Ill send them a test file.  

 

@Jonathan, I've toyed around with you're suggestion but it just seemed the performance wasn't as good.  I will have to look into it more.  

 

Thanks all!  ill keep you updated. 

Link to comment
Share on other sites

Good catch flysi3000, he has a n extra ending </svg> tag

 

You can also use this SVG clean up utility:

 

https://jakearchibald.github.io/svgomg/

 

Copy and paste into Paste markup

 

Just make sure you untoggle Clean ID's in the right side options after you copy and paste your SVG code.

 

:)

  • Like 1
Link to comment
Share on other sites

Sousinho, that's a great effect! Thanks for providing the demo.

Link to comment
Share on other sites

" that did the job in validator...  I guess if it works on validator it should be fine for DFP."

 

​just as an FYI, validator is just a rudimentary check point, and can return false fails. When I used frame scripts for multiple click throughs it did not pass validator, though it functioned correctly, because validator clearly was not parsing the js file. I also named my files wrong once, called a 468x60 a 468x120 and validator took the dimensions from the file name and added 60 pixels, overriding the height and width attributes.

  • Like 2
Link to comment
Share on other sites

Hey Fly!  

 

Damn, that did the job in validator...  I guess if it works on validator it should be fine for DFP.  Ill send them a test file.  

 

@Jonathan, I've toyed around with you're suggestion but it just seemed the performance wasn't as good.  I will have to look into it more.  

 

Thanks all!  ill keep you updated. 

 

Awesome! I'm glad that helped  - I had a similar issue a while ago, and bead my head against a wall for a long time before I figured it out. Love that northern lights effect, too - gonna have to keep that technique in my back pocket for future reference! 

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