SVG is an XML based makeup language and can be embedded into other markup languages, like XHTML and XUL.
Embedding in XHTML
Make sure you use the right namespace when embedding. Notice the template and example use XHTML to handle the namespacing.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:svg="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<body>
<!-- HTML and SVG go here -->
</body>
</html>
Example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:svg="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<body>
<p>hello</p>
<svg:svg version="1.1" baseProfile="full" width="150" height="150">
<svg:rect x="10" y="10" width="100" height="100" fill="red"/>
<svg:circle cx="50" cy="50" r="30" fill="blue"/>
</svg:svg>
<p>world</p>
</body>
</html>
Embedding into XUL
Make sure you use the right namespace when embedding
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<!-- XUL and SVG go here -->
</window>
Example:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:svg="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<vbox>
<label value="hello"/>
<svg:svg version="1.1" baseProfile="full" width="150" height="150">
<svg:rect x="10" y="10" width="100" height="100" fill="red"/>
<svg:circle cx="50" cy="50" r="30" fill="blue"/>
</svg:svg>
<label value="world"/>
</vbox>
</window>