Ch 02 : The Big Picture pt 02 : JavaScript in SVG

SVG inherit all the core DOM methods to get and set attributes and styles.

There are a few complications : SVG is a namespaced XML language, so namespace-sensitive DOM methods when you’re creating elements or setting xlink attributes.

Creating elements named “svg” and “use” in an HTML documnet without setting a namespace, just creates HTMLUnknownElement objects with those names.

This code will work in devtools but will not irl.

    var svg = document.createElement("svg");
    var use = document.createElement("use");
    use.setAttribute("xlink:href", "#icon");
    svg.appendChild(use);
    document.body.appendChild(svg);

Following code creates similar looking elements but with correct namespaces.
It’s not ideal, you have to hardcode XML namespace URLs in your code.

var ns = {svg: "http://www.w3.org/2000/svg",
             xlink: "http://www.w3.org/1999/xlink"};
    
    var svg = document.creatElementNS(ns.svg, "svg");
    var use = document.createElementNS(ns.svg, "use");
    use.setAttributeNS(ns.xlink, "href", "#icon");
    svg.appendChild(use);
    document.body.appendChild(svg);

Alternatively, you can use the HTML parser from JS, by setting tyhe innerHTML property of an HTML element.

var div=document.createElement("div");
    div.innerHTML ='<svg><use xlink:href="#icon" /></svg>';
    document.body.appendChild(div.firstChild);

Be warned : this works only in an HTML document.

How to get your JavaScript into SVG ?

Inline SVG : any script running in your HTML file has access to your inline SVG elements. (inlude in scripttag in head or body as usual).

Standalone SVG : SVG has its own script element. Very similar to html scripttag but not the same.

To include an external JS file with an SVG script element, use an xlink:href attribute (not src like in HTML).

If you want to include the script internal, wrap it in an XML character data (CDATA) block, so that less than and greater than or ampersands, do not cause XML validation errors.

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
     xmlns:xlink="http://www.w3.org/1999/xlin">
    <title>My standalone SVG</title>
    <script xlink:href="/assets/d3.min.js" />
    <script><![CDATA[
        if(1<0) {
        console.log("Uh, math is broken", "But my XML markup isn't");
        }
    /* more scripts */
    ]]>
    </script>
</svg>