declare namespaces for svg and xlink

the namespace declaration for svg is required if you don't specify it, nothing will be rendered. the xlink namespace is required if you use <use/>, <image/>, <a/> ...

a simple SVG file may look like this:

<?xml version="1.0" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
 <title>title of drawing</title>

</svg>

use namespace aware methods in javascript

when using js, make sure you use the namspace aware methods like

  • getElementsByTagNameNS()
  • createElementNS()
  • setAttributeNS()
  • getAttributeNS()
  • ...

svg elements are in the svg namespace. svg attributes are in the null namespace. for example, to dynamicly create an <image> element, do it like this:

svgns="http://www.w3.org/2000/svg" xlinkns="http://www.w3.org/1999/xlink"> newIM=document.createElementNS(svgns,"image") newIM.setAttributeNS(null,"width",100) newIM.setAttributeNS(null,"height",100) newIM.setAttributeNS(xlinkns,"href","bild2.png")