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 to the banners that have inline SVG (Scalable Vector Graphics) images or animations. Such creatives might use the 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 should not be any issues. But when it comes to serving the banner in Adform, or even testing it in the HTML5 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 web page itself.

In order to avoid the CORS errors, we might need to modify the “#” pointers so that that they would 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 hard-coded inside either HTML or CSS parts of the creative, we need to dynamically grab the location of the iframe document and place 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>

    Here is an example of a 'Rewriting CSS styles' method. Download 300x300px.

     

  • Changing "fill" attribute

    Follow this example when you need to change "fill" URL references:

    <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 following snippet might 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>