Your Search Results

    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="http://www.w3.org/2000/svg">
    
      <!-- SVG elements go here -->
    
    </svg>
    

    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 = "http://www.w3.org/2000/svg";
    var xlinkns = "http://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";
    

    Document Tags and Contributors

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