Skip to main content

Visit Mozilla.org

Code snippets:Embedding SVG

From MDC

SVG is an XML based makeup language and can be embedded into other markup languages, like HTML and XUL.

[edit] 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://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>

[edit] 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="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:xlink="http://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="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:xlink="http://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>
Retrieved from "http://developer.mozilla.org/en/docs/Code_snippets:Embedding_SVG"