From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Creatives with SVG

Some extra attention should be paid for the banners that has inline SVG (Scalable Vector Graphics) images or animations. Such creatives might use hashtag (#) references to point to some other element defined in the same HTML document. Typically, such references are used when defining a <mask>, <clip-path>, <use>, etc. When testing this kind of creative locally, there shouldn’t be any issues. But when it comes to serving the banner in Adform, or even testing it in the HTML 5 Studio environment, a Cross-Origin Resource Sharing (CORS) policy might forbid such information exchange between the elements. That's because when serving in Adform, the creative is being placed in its own document (iframe) and in most cases the location (src) of that iframe is not exactly the same as the location of the webpage itself.

In order to avoid the CORS errors, we might need to change the causing “#” pointers in the way that they’d include the iframe’s location (defined in “src” attribute) at the beginning. For example,

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Layer1_Fill"></use>

would become:

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="about:srcdoc#Layer1_Fill"></use>

Note: since usually the “#” references are hardcoded inside either HTML or CSS parts of the creative, we need to dynamically grab the location of the iframe document and add it before the references with the help of javascript.

 

  • Rewriting CSS styles

    The following javascript snippet could help when CSS clip-path is used in SVG:

    <script>
        //grab the location of the document (iframe)
        var loc = location.href.split('#')[0];
        var newStyle = '';
    
    
        //populate the new CSS stylesheet. Selectors and names should be changed accordingly.
    
        newStyle += '.element1_class {clip-path: url("' + loc + '#someClipPath") !important; }';
        newStyle += '.element2_class {clip-path: url("' + loc + '#someClipPath") !important; }';
        //...
    
    
        //add the stylesheet to <head> of the document
        addCSS(newStyle);
    
    
        function addCSS(css, doc) {
            doc = typeof doc !== 'undefined' ? doc : document;
            style = doc.createElement('style');
            if (style.styleSheet) {
                style.styleSheet.cssText = css;
            } else {
                style.appendChild(doc.createTextNode(css));
                doc.getElementsByTagName('head')[0].appendChild(style);
            }
        }
    </script>

     

  • Changing "fill" attribute

    Example to follow, when "fill" url references needs to be changed:

    <script>
        //grab the location of the document (iframe)
        var loc = location.href.split('#')[0];
    
        var rects = document.getElementsByTagName('rect');   //all <rect> tag elements
        var rectsWithFill = [];                              //all <rect> elements that has "fill" attribute
        var fills = [];
        
        for (var i = 0; i < rects.length; i++){
            if (rects[i].hasAttribute('fill')){
                rectsWithFill.push(rects[i]);
            }
        }
        
        for (var j = 0; j < rectsWithFill.length; j++){
            fills.push(rectsWithFill[j].getAttribute('fill').split('(')[1].split(')')[0]);
        }
    
        //function to change all fill url references
        function changeFill(el, prefix) {
            for (var i = 0; i < el.length; i++){
                document.querySelector('[*|fill="url(' + el[i] + ')"]').setAttribute('fill', 'url(' + prefix + el[i] + ')');
            }
        }
        
        changeFill(fills, loc);
        
    </script>
  • Changing “xlink:href” attribute

    When it comes to errors in using the <use> SVG tag, the next snippet might just help:

    <script>
        //grab the location of the document (iframe)
        var loc = location.href.split('#')[0];
    
    
        //reference names should be changed accordingly.
        changeHREF('#Ref_1', loc);
        changeHREF('#Ref_2', loc);
        //...
    
    
    
        function changeHREF(el, prefix) {
    
            document.querySelector('[*|href="' + el + '"]').setAttribute('xlink:href', prefix + el);
        }
    </script>

 

Here is an example when using 'Rewriting CSS styles' method. Download 300x300px