Code snippets: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="">

  <!-- SVG elements go here -->


Note: It is recommended that you do not use DTD's with SVG documents. The tutorial and authoring guidelines have more information.

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 = "";
var xlinkns = "";

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);
            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";

Document Tags and Contributors

 Contributors to this page: Anonymous
 Last updated by: Anonymous,