H5 Validator - Advanced HTML check "SVG_INVALID"

[creativeocean]

This isn't really a GSAP topic, but it is a Banner Animation one. I use this ad validator tool frequently: https://h5validator.appspot.com/dcm –and today I noticed a new error message, reported upon upload of an ad containing SVG in the HTML:

 

Advanced HTML check

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

More details:

• SVG_INVALID

 

 

The simplest and most cross-browser-reliable way to create alpha masks (that I know of) is with SVG. It's an invaluable feature for creating glowy sheens and other complex mask-reveal animations. Since the animations appear to work very well in all the browsers and devices I've tested, I'm stumped as to why DoubleClick would consider using inline SVG 'invalid'. Has anyone else run into this issue? I'm pretty sure this specific 'error' message is a recent modification to the validation/checking that this tool performs. I'm about to send out a batch of ads which use inline SVG today, so we'll see if any new rules apply and get my fancy pants rejected...

[flysi3000]

I would check your svg closing tags. A good way to check is view the ads in Firefox, and use "View Page Source" to look at the document. Any malformed tags will show up highlighted in red. Also, check out this forum post:

 

http://greensock.com/forums/topic/14109-adwords-and-svg-dont-use-shorthand-tag-closing/

 

Apparently, if you're using 

<path ..../>

 vs 

<path ...></path>

 you'll have problems.

 

Hope this helps.

[creativeocean]

@flysi3000, thanks for the tip!

 

However, the 'SVG_INVALID' error doesn't appear to be resolved by using longhand SVG closing tags. Here's a demo link from the H5 Validator for reference: https://h5validator.appspot.com/dcm/result/5800009450651648 (will expire after 30 days)

 

I don't think the warning is actually because of any malformed tags, but rather just the presence of SVG. Again, I've been using this tool for a while, and only last week did I start seeing this 'Advanced HTML check' in the check-list results. Fortunately, I've yet to have any ads containing SVG rejected...yet.

[joe_midi]

@creativeocean:

 

Did you see this post: http://greensock.com/forums/topic/12636-malformed-assets/?p=57431

 

 

@kurrent-kurt: This is what they are looking for (add the "xmlns" and "xmlns:xlink"):

<svg width="128" height="45" baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

 

 

Also, it would help if you used the feedback button in the bottom right corner to ask them to be more descriptive with their error messages.

[creativeocean]

@joe_midi & @kurrent-kurt: Many thanks!! This change made the difference

 

Also, yes, I submitted feedback right after running into this enigmatic warning last week.

[davi]

I know this is an old thread but just wanted to add in another solution just in case someone else is running into this issue and none of the above solutions work out. For me, it was the "<use>" tag. Removing it got rid of the error. (I ended up recreating the SVG so it doesn't need that tag).

[Bradley Lancaster]

Hey guys, i have this problem come up from time time.

 

If an SVG has:

 

Double ID's.

<path id="house"></path>

<path id="house"></path>

 

Double Classes on the same element.

<path id="house" class="scale" class="scale"></path>

 

Non closing tags are common on long svgs sometimes.

<svg>

<g>

  <path id="house"></path>

 

</svg>

 

<svg>

 

Duplicate Tags are common on long svgs sometimes.

 

<g>

  <path id="house"></path>

</g>

</g>

 

It is  best to export for screens or use SVG Omg for cleaner lighter SVG's.

 

 

 

[GreenSock]

@Bradley Lancaster that's pretty weird - what's the source of that problem? Are you saying that your software actually spits out malformed SVG strings? 

 

I've heard great things about SVG OMG. 

[Bradley Lancaster]

@GreenSockNo SVG Omg is a great tool that was a tip on easier to read smaller svg's. I was pointing out that these types of errors happen as part of my workflow. Editing SVG's updating text copying svgs from banner to banner as svg code can be so long and you work to tight deadlines these errors can happen. When I get the malformed error these are the things to lookout for when you are scanning your code by eye. Sometimes I run the banner through the w3c HTML validator to find these errors quickly. I have never had a banner rejected for using inline SVG only when the SVG has a HTML5 error.

[GreenSock]

Ah, okay. Yeah, I'm not sure what else to suggest  Let us know if you discover a great tool for that. 

[Brian Travers]

Thanks to all the previous posters on this, according to my Google, I have been to this post a few times for help.  I just noticed something that might be beneficial to add.  In an ad, had a logo that was used multiple times slightly altered, so to save on file weight, I used the <symbol> and <use> parts of svg.  It worked in all the browsers when I tested it, but it was flagged invalid when by the Doubleclick Validator. 

 

I eventually figured out that it was because an svg's <use> was referencing a symbol defined in a separate svg on the page.  So in one case, I combined the svgs into one (so the svg wasn't referencing something outside of itself) and another case I duplicated the symbol to both svgs (which didn't hurt the k-weight as much as I thought it would).

 

Hope that helps someone else (or me in the future when I return to this page).