Inline SVG throws the browser off
When I open the following HTML document in Web:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test animation</title>
<link rel="stylesheet" href="svg.css" />
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 300 300" width="500" height="500" id="starter_svg">
<text id="username" x="150" y="150" dx="-15" alignment-baseline="middle" text-anchor="end">alice</text>
<text id="at-separator" class="animated" x="150" y="150" alignment-baseline="middle" text-anchor="middle">@</text>
<text id="domain" x="150" y="150" dx="15" alignment-baseline="middle" text-anchor="start">example.com</text>
</svg>
</body>
</html>
I get the following error:
This page contains the following errors:
error on line 7 at column 10: Opening and ending tag mismatch: meta line 0 and head
Below is a rendering of the page up to the first error.
and the text “Test animation” is displayed below it.
If I remove the inline SVG, everything works fine.