About This HTML Issue
A data: URI in the src attribute of an <img> element can't contain a raw <, so inline SVG markup in that URI needs its angle brackets written as %3C and %3E.
A data: URI puts the file itself inside the URL, and everything after the comma has to be made of URL characters. Angle brackets, spaces and double quotes aren't. The validator stops at the first illegal character, which in inline SVG is the < that opens the <svg> tag. The ta: in the message is just the end of data:. The validator quotes the scheme, not the spot where the bad character sits.
This markup often comes from lazy-loading scripts. An empty SVG with only width and height sits in src as a placeholder that reserves the image's box, while the real file waits in data-src or data-srcset. Browsers usually render the placeholder anyway, but the value is still an invalid URL.
Encoding only the angle brackets isn't enough: the validator then reports the first space. Write < as %3C, > as %3E and each space as %20, and use single quotes inside the SVG or encode double quotes as %22. Also remove the ;utf8 after the media type, or write it as ;charset=utf-8. Once the brackets are encoded, the validator rejects a parameter with no value. In JavaScript, encodeURIComponent() produces a valid string, and a base64-encoded SVG with ;base64 before the comma avoids the problem too.
Invalid example
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200'></svg>" data-src="photo.jpg" alt="Product photo">
Valid example
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='200'%3E%3C/svg%3E" data-src="photo.jpg" alt="Product photo">
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.