Adding SVG to an XHTML document

In order to properly add SVG to an XHTML document there are some basic requirements that need to be satisfied. First of all, your host document (that is, the XHTML document that contains one or more SVG elements) must be served as application/xhtml+xml. Second, you must choose the proper DTD from this W3C page.

The second requirement is very important. In fact, if you don't choose the correct DTD, your document won't validate. Many web developers think that they can simply add a svg element to any XHTML document. This is not the case, because if you take a look at the aforementioned W3C document, you'll notice that only certain DTDs allow SVG to be used within their definitions. More precisely, you should use a DTD that combines together XHTML 1.1, MathML and SVG itself. Further, you should decide whether SVG is the host language or not. In any case, always remember to choose the more suitable DTD.

2 thoughts on “Adding SVG to an XHTML document”

  1. I'm afraid this isn't true. Validation has nothing to do with browsers rendering the SVG elements. As long as your document is served as application/xhtml+xml, then the properly namespaced SVG elements will render.

    In fact, I don't include a DTD in my XHTML5+SVG page:

  2. Thanks for your comment Jeff! Validation has nothing to do with SVG rendering. In fact, I didn't mention SVG rendering. The fact that your page correctly renders SVG elements is due to the fact that browsers recognize your elements as such. My point is, however, that if you want that your documents pass validation, you must include a DTD. Alternatively, you could use the attribute standalone in your XML prolog.

    ps. it's impressive your site! congrats!

Leave a Reply

Note: Only a member of this blog may post a comment.