Embedding SVG

by 3 contributors:

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" "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>

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>

Document Tags and Contributors

Tags: 
Contributors to this page: wbamberg, Ms2ger, MarkFinkle
Last updated by: wbamberg,
Hide Sidebar