Jump to content
GreenSock

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

SVG Clip Paths, Gradients, and DoubleClick DCM Upload Issue

Recommended Posts

I'm having in issue where DoubleClick is throwing an error when uploading a standard banner with inline svg; to DoubleClick Campaign Manager.

 

It seems to have proplems when the inline svg references clip paths and fills using url().  The SVG that illustrator outputs has two parts in it where I'm using a basic mask and a gradient fill.  Like this:

 

clip-path:url(#SVGID_2_);

fill:url(#logo_1_);
 
When you upload the banner DoubleClick detects those two as url requests and looks for files named "#SVGID_2_" and "#logo_1_" which obviously don't exist because the are references to ids in the inline svg code. DoubleClick throws and error saying there are missing files.
 
This is basically putting a halt to wrapping up what was a finished banner until I tried to upload it.  Has anyone else experienced this and found any work around?  I'm doing some pretty basic stuff with SVG here so it is rather disappointing to run into this.
 
Thanks.

post-14713-0-12917600-1440045621_thumb.png

Share this post


Link to post
Share on other sites

That sounds like more of a DoubleClick question - have you contacted them? I'm also curious if it would work if you just removed the "url()" wrapper. We really try to stay focused on GSAP-specific questions here, but hopefully someone else can chime in and maybe give you some ideas. Let us know if you find a solution please. 

Share this post


Link to post
Share on other sites

I have an email out to DoubleClick support.  I posted here as well because I would think a lot of people will be attempting to do very similar stuff to what I am doing with the GSAP + the DrawSVG plugin.  But, when it comes time to actually deploy a banner that uses the SVG/GSAP techniques you see talked about and in many of the great codepen examples, you would hit this road block.

 

I tried removing the url() wrapper but that seems to break the clip path and gradient fill in the svg.  Possibly there is some other way to modify the svg code to remove the url references that someone more experience with svg would know about.  Another possibility I just came across is loading it via ajax and injecting it into the dom as shown here http://plnkr.co/edit/LneUEK?p=preview.

Share this post


Link to post
Share on other sites

For now I've gotten around this by using the technique shown here in the script.js file; injecting an externally loaded .svg file into the dom. http://plnkr.co/edit/LneUEK?p=preview

 

This script might also work, though I'm unsure of browser compatibility https://github.com/iconic/SVGInjector

 

Once the .svg contents are injected into the DOM, you can animate them with GSAP.  And DoubleClick doesn't throw a fit when you upload the ad, because all the SVG is contained in an external file that it doesn't parse.

 

It isn't ideal and seems like overkill, but it will have to do for now.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for posting about your experience. Hopefully they can work around the mask url problem in the near future. It seems that SVG will be a great choice for many banner ads.  

  • Like 1

Share this post


Link to post
Share on other sites

Hi Noco,

 

I am thinking of using some SVG elements in a display ad, and I was wondering if DoubleClick got back to you on the best solution ?

Also, for the injecting it using the ajax method you found, would I just need this code to make it work :

function injectSvg(xmlDoc) {

    var svg = $(xmlDoc).find("svg");
    container.append(svg);
  }

...or do I need more from the link you provided as an example ?

Share this post


Link to post
Share on other sites

If you are using jQuery it is very easy to inject an SVG using the load method. 

// Inject the entire SVG
$("#my-container").load("foo.svg", callbackToStartAnimation);

// Or a partial
$("#my-container").load("foo.svg #bar", callbackToStartAnimation);

http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview

 

 

 

 

  • Like 1

Share this post


Link to post
Share on other sites

DoubleClick got back to me and basically said they couldn't help:

 

"I’ve tried my best to get some insights over the SVG coding and have exhausted all my resources, unfortunately, as it’s extensively related to coding, couldn’t get any concrete answer on what was causing the issue. 

 

I’d suggest you please contact your creative agency, as they might be able to help with the coding.

 

Sorry for not being of much help, and appreciate your understanding."

 

I would imagine this issue is going to start coming up regularly, so hopefully at some point the right person starts looking into it.

 

This is what the SVG injection code I used is:

var container = $("#svgHolder");
        var svgUrl    = "graphics.svg";

        $.get(svgUrl)
                .then(injectSvg)
                .always(startAnimation);

        function injectSvg(xmlDoc) {

            var svg = $(xmlDoc).find("svg");
            container.append(svg);
        }

Unfortunately it is using jQuery.  I didn't have time to code a cross browser version that us jQuery free.  jQuery from a CDN (gzipped) is only like 35k or so, in my case that was fine.

 

The other annoyance is that because of ajax crossdomain issues, you won't be able to just open the html file in the browser to preview your work. You'll need to preview it through a webserver (eg localhost).

Share this post


Link to post
Share on other sites

I was happily swapping pasted from Illustrator vector logos, that are automatically converted to SVG logos in Edge Animate, for versioning, which could be scaled any which way I needed them to go, and they did not seem to remember the previous SVG's height and width, so  I did not have to manually change height and width...

 

Until I did an IE11 check...

 

The totally unacceptable rendering in IE was in the strokes.

 

Edited to add, it is totally an issue with IE doing a horrible job with curved lines in very small logos.

 

 

However creating text with fonts that are not web fonts in illustrator and pasting into Edge as SVG totally rocks.

Share this post


Link to post
Share on other sites

Hi Noco, I know this is not necessarily a GSAP question from the original post, but in-case anyone is trying to do this -- I just did a simple test on DoubleClick Studio with an inline SVG that has a reference to a fill:url(#SVGID_1_) and a clip-path:url(#SVGID_2_). I was able to upload, test, publish, QA, approve & submit, without doing anything special to my inline SVG. I have an external preview if interested, but it's just some basic gradient and a clipped shape. 

Share this post


Link to post
Share on other sites

Hi Noco, I know this is not necessarily a GSAP question from the original post, but in-case anyone is trying to do this -- I just did a simple test on DoubleClick Studio with an inline SVG that has a reference to a fill:url(#SVGID_1_) and a clip-path:url(#SVGID_2_). I was able to upload, test, publish, QA, approve & submit, without doing anything special to my inline SVG. I have an external preview if interested, but it's just some basic gradient and a clipped shape. 

 

This was actually through DoubleClick DCM, not Studio.  Studio is Rich Media and these were just Standards HTML5 Banners.  The tough thing is that most banner creators only have access to Studio, so you wouldn't know there is a problem until you sent these off to the Media company for trafficking, then they would see the issue.  Luckily I have access to DCM and was able to catch it.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×