AdWords
1.7K members online now
1.7K members online now
Dive into advanced features like Remarketing, Flexible Bid Strategies, AdWords Editor, and AdWords Scripts
Guide Me
star_border
Reply

Embedded SVG is broken after uploaded

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

Hello,

I'm trying to make a complex image-ad (banner) in HTML5/SVG by using an <svg> tag and animating its content with JavaScript.

 

I followed all the guidelines of AdWords HTML5, but after I've uploaded the HTML (compressed in the the ZIP package) the SVG content in the <svg> tag appears modified, and completely broken.

 

I expected the content not to be touched by the tool, why is this content parsed and then modified?

 

(I could attach a "before and after" of my HTML, if you need more techical informations)

 

Thanks!

 

1 Expert replyverified_user
1 ACCEPTED SOLUTION

Accepted Solutions
Marked as Best Answer.
Solution
Accepted by CassieH (Community Manager)
December 2015

Re: Embedded SVG is broken after uploaded

Community Manager
# 7
Community Manager
Hi Tomas,

I'm not sure if your issue is the same as Cesare's, but the answer to his question was that it is not possible to embed the SVG into the HTML file to be accessed by JS. If you are unable to animate the .SVG images, you could use the other supported image files (.PNG, .JPEG, ,JPG, and .GIF) to try to accomplish this. You can then include .JS files in the .ZIP file and animate the images by referencing them in the .HTML.

If your question is different, please start a new thread for your question so that it is visible to all of our experts!

Thanks,
Cassie

View solution in original post

Re: Embedded SVG is broken after uploaded

Community Manager
# 2
Community Manager
Hi cesare,

Is the system giving you an error when you upload, or is it just not uploading correctly?

If you could you please provide screenshots/the code here, we can take a crack at finding a fix!

Cassie

Re: Embedded SVG is broken after uploaded

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

Hello Cassie,

thanks for your reply.

 

There is no error, but after the upload the file is different from the original, and the SVG tag structure is broken.

 

This is acode example: (sorry i don't find where i can attach a file)

 

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"></meta>
    <meta name="ad.size" content="width=160,height=600"></meta>
</head>

<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="160" height="600" viewBox="0 0 160 600" xml:space="preserve">
        <rect id="viewport" x="0" y="0" fill="#CCCCCC" width="160" height="600"></rect>

        <rect x="30" y="30" fill="#0000FF" width="100" height="100"></rect>

        <image x="30" y="160" width="100" height="100" xlink:href="data&colon;image/png;base64,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"/>
    </svg>
</body>

</html>

After the upload I see only one of the two blue squares.

 

If I inspect the code, i see the <image> markup is different:

 

<Img height=100 width=100 x=30 xlink:href="data&colon;image/png;base64,....">

it's changed in Img and contains no closing tag (breaking subsequent tags!)

 

 

Re: Embedded SVG is broken after uploaded

[ Edited ]
Visitor ✭ ✭ ✭
# 4
Visitor ✭ ✭ ✭

I think this is a different problem, but the code breaks also if I insert something like:

<rect id="viewport" x="0" y="0" fill="#CCCCCC" width="160" height="600" />
<rect id="background" x="30" y="100" fill="#00CC00" width="100" height="100" />


without explicit closing tags </rect> but with implicit />, which is SVG standard.

 

The resulting code is broken for unclosed tags, containing as childs all the subsequent tags that should have been siblings:

 

<rect id="viewport" x="0" y="0" fill="#CCCCCC" width="160" height="600">
    <rect id="background" x="30" y="100" fill="#00CC00" width="100" height="100">
    </rect>
</rect>

This breaks visualization as the <rect> tag is not allowed to have content!

 

Thanks again,

cesare

Re: Embedded SVG is broken after uploaded

Community Manager
# 5
Community Manager
Hi cesare,

I'm going to send you an email to get more information; please respond to that when you receive it!

Cassie

Re: Embedded SVG is broken after uploaded

Visitor ✭ ✭ ✭
# 6
Visitor ✭ ✭ ✭
Hi Cassie,
we have same problem. What is solution for that? In our source code we have <image> in <svg> tag and Google AdWords compiler transform <image> to <Img> and broke the code.
Thank you Tomas
Marked as Best Answer.
Solution
Accepted by CassieH (Community Manager)
December 2015

Re: Embedded SVG is broken after uploaded

Community Manager
# 7
Community Manager
Hi Tomas,

I'm not sure if your issue is the same as Cesare's, but the answer to his question was that it is not possible to embed the SVG into the HTML file to be accessed by JS. If you are unable to animate the .SVG images, you could use the other supported image files (.PNG, .JPEG, ,JPG, and .GIF) to try to accomplish this. You can then include .JS files in the .ZIP file and animate the images by referencing them in the .HTML.

If your question is different, please start a new thread for your question so that it is visible to all of our experts!

Thanks,
Cassie