HTML Guide
A tag starting with <? has been found within the document, but it’s not supported. Probable causes can be:
-
Copy-pasting the contents of an SVG file. If you do that, you should only paste the
<svg>...</svg>part, but not the first line with<?xml...>. -
Unprocessed
<?...>tags on server scripting languages like PHP, like<?php>
Learn more:
- [freeCodeCamp: How to Use SVG Images in CSS and HTML]https://www.freecodecamp.org/news/use-svg-images-in-css-html/)
Last reviewed: March 08, 2023
Related W3C validator issues
The attribute xmlns:serif is not valid. Check this guide for more information on this issue.
Remove the xmlns:svg attribute from the <svg> element, leaving only the valid xmlns attribute.
The xmlns attribute defines the XML namespace for the SVG and is correctly set to http://www.w3.org/2000/svg. The xmlns:svg attribute attempts to declare a prefixed namespace, which is unnecessary and invalid in both HTML and SVG served as XML (or embedded in HTML). The W3C validator flags this because HTML5 does not allow arbitrary XML namespace declarations beyond the standard SVG namespace; such prefixes are not used in HTML serialization.
Incorrect usage:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<!-- SVG content -->
</svg>Correct usage:
<svg xmlns="http://www.w3.org/2000/svg">
<!-- SVG content -->
</svg>Only xmlns="http://www.w3.org/2000/svg" is required for inline SVG in HTML.
The “xmlns:o” attribute is not allowed because it is not part of the standard HTML attributes and typically appears due to improperly embedded XML or Office-related HTML content.
In HTML documents, the “xmlns” attribute is used to declare a namespace and is generally valid for certain elements when dealing with XML documents or XHTML. However, the “xmlns:o” attribute specifically relates to XML namespaces typically used in Microsoft’s Office XML formats (for example, when copying and pasting styled content from Word to an HTML editor). Since HTML5 doesn’t natively support these namespaces as valid HTML attributes and strictly validates against them, any non-standard attributes like “xmlns:o” generate validation errors.
To fix this issue, you should remove the “xmlns:o” attribute unless you are sure that it’s necessary for the function of your document, and the document should be processed in a way that supports such namespaces. If the content is not meant to include Office-specific data elements, it’s likely this attribute was accidentally included and can be safely removed.
Example of Incorrect HTML with “xmlns:o”
<!DOCTYPE html>
<html>
<head>
<title>Sample Document</title>
</head>
<body xmlns:o="urn:schemas-microsoft-com:office:office">
<p>This is a paragraph within a body tag falsely including an xmlns:o attribute.</p>
</body>
</html>Corrected Example without “xmlns:o”
<!DOCTYPE html>
<html>
<head>
<title>Sample Document</title>
</head>
<body>
<p>This is a paragraph within a correctly structured HTML document.</p>
</body>
</html>By removing the “xmlns:o” attribute, the HTML document complies with the W3C standards, leading to successful validation. If you require namespaces for XML processing, it’s essential to handle them outside the context of standard HTML or within an XML or XHTML document structure where such namespaces are appropriate and valid.
The attribute xmlns:serif is not a valid namespace. This attribute is set by Affinity Designer on SVG exports.
The xmlns:svg attribute is not allowed on the <svg> element in HTML5 and causes validation errors.
The SVG specification only requires the xmlns (not xmlns:svg) attribute for embedding SVG in HTML, and custom namespace prefixes like xmlns:svg are not needed or permitted in HTML5. The sole required namespace declaration is xmlns="http://www.w3.org/2000/svg". The xmlns:svg form was only used in extremely outdated XML-based workflows and has no place in current HTML.
Incorrect HTML Example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<!-- SVG content here -->
</svg>Correct HTML Example:
<svg xmlns="http://www.w3.org/2000/svg">
<!-- SVG content here -->
</svg>In summary:
- Use only xmlns="http://www.w3.org/2000/svg" in inline SVG within HTML documents.
- Remove xmlns:svg and any other prefixed namespace attributes unless specifically required for XML workflows, not HTML.
Empty aria-labelledby on the <svg> is invalid because it must reference one or more existing IDs with non-empty, non-whitespace text.
The aria-labelledby attribute takes a space-separated list of element IDs (IDREFS). Each ID must exist in the document and point to elements that provide an accessible name. On <svg>, this is commonly a <title> or other visible text element. If you have no label to reference, either remove aria-labelledby or provide a valid referenced element. Alternatively, use the aria-label attribute with a text string. Do not leave aria-labelledby empty, and ensure IDs are unique and match exactly (case-sensitive). Examples: reference a <title> with an id, or use aria-label directly on the <svg>.
HTML Examples
Example showing the issue
<svg role="img" aria-labelledby="">
<use href="#icon-star"></use>
</svg>Fixed examples
<!-- Option A: Reference a title by ID -->
<svg role="img" aria-labelledby="starTitle">
<title id="starTitle">Favorite</title>
<use href="#icon-star"></use>
</svg>
<!-- Option B: Use aria-label instead (no referenced IDs needed) -->
<svg role="img" aria-label="Favorite">
<use href="#icon-star"></use>
</svg>
<!-- Option C: Decorative icon (no name) -->
<svg aria-hidden="true" focusable="false">
<use href="#icon-star"></use>
</svg>Ensure the xmlns attribute for <svg> elements is set to “http://www.w3.org/2000/svg”.
In HTML documents, the xmlns attribute in an <svg> element must be defined correctly. The xmlns attribute specifies the XML namespace for an SVG element, which should always be “http://www.w3.org/2000/svg”. If you receive a validation error indicating a bad value for xmlns, it means that the attribute is empty or incorrectly set. This namespace ensures that the SVG elements are properly recognized as SVGs by the browser and aids in maintaining proper structure and function.
Here’s a correct example of an <svg> element:
<!DOCTYPE html>
<html lang="en">
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</body>
</html>Ensure that every <svg> element you use includes the xmlns attribute with the correct value to avoid validation issues and ensure complete browser compatibility.
The only permitted value for the xmlns attribute is http://www.w3.org/2000/svg.
The namespace declaration for an <svg> element is provided by the xmlns attribute like this:
<svg xmlns="http://www.w3.org/2000/svg">
<!-- more tags here -->
</svg>Although using https in the URL looks like it’s going to be more secure, in fact this URL is not used to connect it to, only to declare the namespace.
The text-anchor attribute is used within SVG elements like text or textPath to specify the alignment of text relative to a given point, but it’s not allowed on g container elements.
Here’s an example of how you can correctly use the text-anchor attribute on a <text> element in SVG:
<svg width="200" height="200">
<text x="100" y="100" text-anchor="middle">Centered text</text>
</svg>In this example:
- The text-anchor="middle" attribute is applied directly to the <text> element.
- It aligns the text in the middle horizontally around the specified x-coordinate.
You can use the text-anchor element with the SVG elements text, textPath, tref or tspan.
The allowed values for the text-anchor attribute are start, middle or end. The value none is not valid for this attribute.
A <pattern> element has been found with an invalid ID. Check the format of the ID and ensure it does not start with a digit, full stop (.) or hyphen (-).
The <pattern> element is used within <svg> elements, which use XML 1.0 syntax. That syntax specifies that valid IDs only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.