AMPHTML ads not accepted by HTML5 validator

Report · Feb 20, 2020

Hello!

So, I decided to give it a go and created my first AMPHTML ad with Animate.

Now I have problem validating the ad with https://h5validator.appspot.com/

My ad doesn't pass the Advanced HTML5 check. I get the following error message:

One of your HTML5 assets is invalid and cannot be analyzed. Please correct any malformed assets and try again.

More details:

SVG_INVALID

Below you can see the source code of the ad. Would anyone here have an idea what could be the problem? I didn't modify the code in any way, it is exported from Animate.

 <!doctype html>
<html amp4ads>
<head>
	<!-- export v1.0.36-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1">
	<style amp4ads-boilerplate>body{visibility:hidden}</style>
	<style amp-custom> img {position: absolute;} body {background-color: rgba(255,255,255,1.0000);}
	  svg {width: 300px; height: 300px; position: absolute;}     .hideForPreload { visibility: hidden; }   </style>
	<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
	<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>

<body  >
<amp-analytics type="googleanalytics" id="pageView">
<script type="application/json">
{
  "vars": {
	"account": "No ID found."
  },
  "triggers": {
	"trackPageview": {
	  "on": "visible",
	  "request": "pageview"
	}
  }
}
</script></amp-analytics>
<div id="svgWrapper" class="hideForPreload" >
	<svg style="width: 0; height: 0;">
		<defs>
			<g vector-effect="none" id="l0" >
                				    <g vector-effect="inherit" id="l0o0" style="transform: matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000); opacity: 1.0000; visibility: inherit;">
					<path vector-effect="inherit" fill="rgba(0,0,204,1.000)" stroke="none" d="M 300.0000 0.0000 L 0.0000 0.0000 L 0.0000 300.0000 L 300.0000 300.0000 L 300.0000 0.0000 "></path>
				    </g>
                			</g>
		</defs>
</svg>				<svg><use id="o0" xlink:href="#l0" ></use></svg>
	
</div>
<amp-animation layout="nodisplay" trigger="visibility">
	<script type="application/json">
		{"animations":[
         {
           "selector": "#svgWrapper",
           "duration":"1s",
           "iterations":1,
           "fill":"both",
           "keyframes": [
             {
               "offset" : 0,
               "visibility" : "inherit",
               "easing" : "step-start"
             },{
               "offset" : 1,
               "visibility" : "inherit",
               "easing" : "step-end"
              }
           ]
         },
{
	"selector" : "#o0",
	"duration" : "2s",
	"iterations" : "infinity",
	"fill" : "both",
	"keyframes" : [
		{
			"offset" : 0,
			"transform" : "matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000)",
			"opacity" : 1,
			"visibility" : "inherit",
			"easing" : "cubic-bezier(0.3333, 0.3333, 0.6667, 0.6667)"
		},
		{
			"offset" : 1,
			"transform" : "matrix(1.0000,0.0000,0.0000,1.0000,0.0000,0.0000)",
			"opacity" : 1,
			"visibility" : "inherit",
			"easing" : "step-end"
		}
	]
}
		]}
	</script>
</amp-animation>
</body>
</html>

Report · Feb 26, 2020

@tanelij39936801 found a solution yet? please share if there any.

I am facing the same issue. I know the AMPHTML plugin is in beta but a quick fix could be a great help.

Report · Feb 26, 2020

Hello Vichili

Unfortunately I didn't find a solution yet.

However, I'm pretty sure the problem lies within the <svg><use></use></svg> tag, since after removing this tag the error doesn't appear anymore. Unfortunately, this also breaks the ad as well since content't of the ad won't show if you remove it.

You could find a workaround to this, but in my opinion it doesn't make sense as ads should work after you export them from Animate. If they don't, its pretty much useless to create them in this format as we don't want to stay hassling with the source code after exporting the ad.

Report · Feb 26, 2020

Thanks for the quick reply mate!

Like you said it sould work well after exporting from Animate and i dont got the time from the client to workaround with the tags.

Not intrested to go for any other tools as i have so much years of experiance working with Adobe Flash.

Lets see.

Thank you,

Vichili

Report · Feb 26, 2020

Hopefully they will fix it soon. As you said, its still beta, and because of this issue, its useless for commercial use at the moment. Another problem is that at least for me, I needed to downgrade my Animate to version 19 to be even able to create these ads.

AMPHTML ads not accepted by HTML5 validator

Photos