SVG General

On this page you will find some simple, general information on SVG markup. Hopefully, enough to get you creating some SVG images. You will also find some general purpose scripting helpers, that should make scripting SVG a little easier.

SVG Template

Here is a basic markup template to start building an SVG document:

<svg xmlns="https://www.w3.org/2000/svg">

  <!-- SVG elements go here -->

</svg>

Dynamic scripting helper

This little helper script can be used to simplify creation of SVG elements in script. SVG requires you to use setAttributeNS to add attributes to a newly created SVG DOM element. No properties like HTML. SVG IMAGE also requires the use of XLINK for the href attribute, which can be tricky to remember, especially when you're mixing SVG with HTML or XUL. Here is the script:

var svgns = "https://www.w3.org/2000/svg";
var xlinkns = "https://www.w3.org/1999/xlink";

var ATTR_MAP = {
  "className": "class",
  "svgHref": "href"
}

var NS_MAP = {
    "svgHref": xlinkns
};

function makeSVG(tag, attributes) {
    var elem = document.createElementNS(svgns, tag);
    for (var attribute in attributes) {
        var name = (attribute in ATTR_MAP ? ATTR_MAP[attribute] : attribute);
        var value = attributes[attribute];
        if (attribute in NS_MAP)
            elem.setAttributeNS(NS_MAP[attribute], name, value);
        else
            elem.setAttribute(name, value);
    }
    return elem;
}

Attributes are packed in a literal Object and the helper script unpacks them and adds them to the element. Here are some examples of using it:

var circle = makeSVG("circle", {id: "circle1", cx: "60", cy: "60", r: "50"});

var img = makeSVG("image", {id: "img1", x: "110", y: "110", width: "100", height: "100", svgHref: "bubbles.png"});

var text = makeSVG("text", {id: "text1", x: "60", y: "60"});
text.textContent = "Hello World";