Search the Community

After a half year of intense hacking/coding and patching, I felt my adWords ads are safe from validator's silly error messages, but recently encountered an insane bug, not in validator but in the adWords image ad uploader/converter. I have made a few banners for Coca Cola with SVG soft masking and clip paths. When I uploaded to adWords all the ads fell apart. It turned out, the uploader converted my <image> tags to <img> which is.... bad. Beside this the program tried to close the <path> <maks> <clip-path> tags, without success. This is a part from my HTML: <svg id = 's' width = 300 height = 250 viewBox = '0 0 300 250' xmlns = 'http://www.w3.org/2000/svg' class = Asset > <rect id = 'back' x = -23 y = -1 width = 344 height = 125 fill = 'rgb( 239, 239, 239 )' /> <g id = 'PICBG' layout = '156 0 97 110' > <rect id = 'b1' x = 99 y = 9 width = 97 height = 94 fill = 'rgb( 229, 229, 229 )' /> <rect id = 'flow' x = 145 y = 31 width = 4 height = 41 fill = 'rgb( 0, 0, 0 )' /> <rect id = 'flow2' x = 145 y = 31 width = 4 height = 41 fill = 'rgb( 0, 0, 0 )' /> <path id = 'b4' transform ='scale(.1)' layout = '141 24 13 8' fill = 'rgb( 210, 210, 210 )' d = 'm1415,242h120v25c0,28 -22,50 -50,50h-20c-28,0 -50,-22 -50,-50v-25z' /> <path id = 'b3' transform ='scale(.1)' layout = '130 13 35 13' fill = 'rgb( 170, 170, 170 )' d = 'm1300,137h350v65c0,28 -22,50 -50,50h-250c-28,0 -50,-22 -50,-50v-65z' /> <path id = 'b2' transform ='scale(.1)' layout = '99 -7 97 22' fill = 'rgb( 98, 98, 98 )' d = 'm990,-68h970v115c0,55 -45,100 -100,100h-770c-55,0 -100,-45 -100,-100v-115z' /> </g> <g id = 'SLIDER' layout = '0 57 354 114' > <image id = 'poharReflect' x = -33 y = 72 width = 29 height = 77 /> <image id = 'pohar1' x = 27 y = 72 width = 29 height = 77 /> <image id = 'pohar2' x = 87 y = 72 width = 29 height = 77 /> And this is what adWords made from it: <svg class=Asset height=250 id=s viewBox="0 0 300 250" width=300 xmlns="http://www.w3.org/2000/svg"> <rect fill="rgb( 239, 239, 239 )" height=125 id=back width=344 x="-23" y="-1"> <g id=PICBG layout="156 0 97 110"> <rect fill="rgb( 229, 229, 229 )" height=94 id=b1 width=97 x=99 y=9> <rect fill="rgb( 0, 0, 0 )" height=41 id=flow width=4 x=145 y=31> <rect fill="rgb( 0, 0, 0 )" height=41 id=flow2 width=4 x=145 y=31> <path d="m1415,242h120v25c0,28 -22,50 -50,50h-20c-28,0 -50,-22 -50,-50v-25z" fill="rgb( 210, 210, 210 )" id=b4 layout="141 24 13 8" transform="scale(.1)"> <path d="m1300,137h350v65c0,28 -22,50 -50,50h-250c-28,0 -50,-22 -50,-50v-65z" fill="rgb( 170, 170, 170 )" id=b3 layout="130 13 35 13" transform="scale(.1)"> <path d="m990,-68h970v115c0,55 -45,100 -100,100h-770c-55,0 -100,-45 -100,-100v-115z" fill="rgb( 98, 98, 98 )" id=b2 layout="99 -7 97 22" transform="scale(.1)"> </path></path></path></rect></rect></rect></g> <g id=SLIDER layout="0 57 354 114"> <Img height=77 id=poharReflect width=29 x="-33" y=72> <Img height=77 id=pohar1 width=29 x=27 y=72> <Img height=77 id=pohar2 width=29 x=87 y=72> At runtime, the <Img> tags are popping out of the <svg> structure as the browser trying to understand them. It places them after the closing </svg> tag. And notice the desperate effort of Google employees to close the tags: </path></path></path></rect></rect></rect></g> It took a half day to hack around this. The solution was to introduce an imaginary tag ( don't ask it's name. i was angry ). At runtime iterate over these elements. With every element: copy it's attributes, make proper SVGImageElement with these attributes, inject it into DOM after the imaginary element, delete the old element.