SVG inside XHTML

jim_albright
30 Jul 2010

<div class="Spine">

<svg height="300" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="0" transform="rotate(90)">Neue Genfer Übersetzung</text>
</svg>

<h2>Alternate Title Goes Here</h2>
<p class="Language_Name">German</p>
</div>

This code produces the rotated text as desired for the book spine. But it does not validate as XHTML strict.
How do I embed this SVG inside of XHTML?

So far I have found that <embed> is not valid.
<html xmlns:svg="http://www.w3.org/2000/svg"> Is not valid.

Both <object> and <iFrame> are listed as possibilities but I don't see how it applies to <text>.

Jim Albright
Wycliffe Bible Translators

mikeday
31 Jul 2010

I don't think you can use any SVG or MathML elements in a document and be valid according to the XHTML 1.0 Strict DTDs. If you really care about DTD validation you can use the "XHTML 1.1 plus MathML 2.0 plus SVG 1.1" DTD, which includes exactly what it says.

jim_albright
31 Jul 2010

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"[]>
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
.....

<div class="Spine">

<svg:svg height="300" >
<svg:text x="0" y="0" transform="rotate(90)">Neue Genfer Übersetzung</svg:text>
</svg:svg>

<h2>Alternate Title Goes Here</h2>
<p class="Language_Name">German</p>
</div>

This works! Thanks.

Jim Albright
Wycliffe Bible Translators

Forum › How do I...?