Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
creativeocean

H5 Validator - Advanced HTML check "SVG_INVALID"

Recommended Posts

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...

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

@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.

  • Like 4
Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

  • 3 years later...

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).

  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...

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.

 

 

 

Link to comment
Share on other sites

@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. 

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×