MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    Embedding SVG

    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