HTML Guides for data uri

A data: URI in the src attribute of an <img> element can't contain literal spaces, so an inline SVG in that URI needs every space written as %20.

The data: scheme, defined in RFC 2397, puts the file itself in the attribute value. The data after the comma may only contain URL characters, and a space isn't one of them. The ta: in the message is the end of data:. The validator quotes the scheme rather than the position of the space, so the space can be anywhere in the value.

Inline SVG is the usual cause. SVG markup needs a space between the element name and each attribute, as in <svg xmlns='...' width='300'>, and encoding the angle brackets as %3C and %3E leaves those spaces alone. A common case is an empty SVG with only width and height, used as a placeholder that holds the image's box until the real file loads.

Browsers usually render the image anyway, but the value is still an invalid URL. Replace every space with %20, or base64-encode the SVG and add ;base64 before the comma. In JavaScript, encodeURIComponent() converts the spaces to %20, along with the angle brackets and double quotes. If the SVG is large or reused, save it as a file and point src at that file.

Invalid example

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'/%3E" alt="">

Valid examples

<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='200'/%3E" alt="">

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMjAwIi8+" alt="">