As an XML-based language, SVG can be validated just as HTML is. The primary tool for this is the W3C validation service, although others are available. In order to ensure their SVG-infused pages still validate, developers need to be careful in how SVG is added to their code:
SVG Integrated Into HTML5
Perhaps the ideal case, at least in terms of clarity. Simply place your SVG code directly in the body of the HTML5 document:
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset=utf-8>
</head>
<body>
<h1>HTML5 SVG Test</h1>
<svg height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>The code above will validate as HTML5, while the SVG will appear as a red circle on the page.
Validating A Standalone SVG Document
The next most common scenario: you have a separate .svg file, with SVG integrated into your web page via CSS or an The one downside to this last approach is that the SVG document will no longer validate as SVG, but as XML. This isn’t wrong, but it’s possibly less useful. Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.<img>. Feeding a correctly formatted SVG document to the W3C Markup Validation service will result in a valid page, assuming that SVG code has been used correctly:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
