AdWords replacing <image> tags in embedded SVG

[Oliver16Years]

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.
 

[Dipscom]

That does not sound fun Oliver15Years.

 

You can write you SVG tags with opening and closing tags.

<rect id = 'b1' x = 99 y = 9 width = 97 height = 94 fill = 'rgb( 229, 229, 229 )' ></rect>
<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>

Obviously it won't help with the <image> being converted into <img> but it should be one less thing for them to break for you.

[Vitalii Bahmet]

• Hi Oliver15Years,

 

There's still no answer for your request on Adwords forum.

I have asked that Cassie but really not sure how and when they come up with fixing <image> replacing issue.

[Oliver16Years]

 

• Hi Oliver15Years,

 

There's still no answer for your request on Adwords forum.

I have asked that Cassie but really not sure how and when they come up with fixing <image> replacing issue.

 

 

Thanks for Your support Vitaliy! I saw You post on

 

https://www.en.advertisercommunity.com/t5/Advanced-Features/Why-AdWords-replacing-lt-image-gt-tags-in-SVG/td-p/867486

 

I bet this is a 15 min task to fix, But Google is too big...

 

Oliver