SVG:Namespace

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/> ...

• the svg namespace: http://www.w3.org/2000/svg
• the xlink namespace: http://www.w3.org/1999/xlink

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 namespace aware methods like:

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

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

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