Combining XHTML and SVG in One XML Document Using Namespaces

Desired Outcome

Create a single XML document that contains both XHTML markup (for text and layout) and SVG markup (for vector graphics) without element name collisions. XML namespaces solve this by binding each vocabulary to a unique URI, so an h:div and an s:div are unambiguous even though the local names match.

Prerequisites

• An XML editor or IDE that supports syntax highlighting (e.g., VS Code, Oxygen XML Editor).
• Basic understanding of XML well-formedness rules.
• The namespace URIs for the vocabularies you intend to mix:
• XHTML: http://www.w3.org/1999/xhtml
• SVG: http://www.w3.org/2000/svg

Procedure

1. Declare the namespaces on the root element using prefixes. Choose short, memorable prefixes (e.g., h for XHTML, s for SVG).
2. Prefix every element from each vocabulary with its declared prefix.
3. Optionally declare a default namespace for the vocabulary that appears most frequently to reduce prefix usage. Do not rely on a default namespace alone when mixing vocabularies, because any element needing the other vocabulary still requires an explicit prefix.

Example XML (save as mixed.xhtml):

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns:h="http://www.w3.org/1999/xhtml"
      xmlns:s="http://www.w3.org/2000/svg">
  <h:head>
    <h:title>XHTML+SVG example</h:title>
  </h:head>
  <h:body>
    <h:p>This paragraph is XHTML.</h:p>
    <s:svg width="200" height="200">
      <s:circle cx="100" cy="100" r="80" fill="green" />
    </s:svg>
  </h:body>
</html>

Expected Checks

• Well-formedness: Open the file in a browser (Firefox, Chrome) or an XML viewer; it should display without parsing errors.
• Namespace correctness: Run a parser that reports undeclared prefixes. Example command using xmllint (available on Linux/macOS, install via your package manager; run in a terminal, no special permissions needed for a local file):

  xmllint --noout mixed.xhtml

  If the command prints nothing and exits with status 0, the document is well-formed and all prefixes are declared. Any error message will name the offending line.
• Combined validation (optional): If you have a RELAX NG or XML Schema that combines XHTML and SVG, validate with:

  xmllint --noout --schema combined.xsd mixed.xhtml

  Replace combined.xsd with the path to your schema file.

Recovery Options

• Undeclared prefix error (e.g., "Namespace prefix h on div is not defined"): Add the missing xmlns:h="http://www.w3.org/1999/xhtml" declaration to the root element or the nearest ancestor of the failing element.
• Namespace mismatch error (e.g., a validator reports the prefix is bound to an unexpected URI): Verify the URI in the xmlns:s attribute exactly matches http://www.w3.org/2000/svg. Correct any typos or trailing spaces. Note that namespace URIs are compared as exact strings; never change a URI after documents are in use, because existing consumers depend on the original value.
• Rendering issue (the document parses but the SVG does not display): Ensure the browser supports inline SVG within XHTML (most modern browsers do). If not, serve the document with an .svg extension or embed the graphic via an <object> tag.