New SVG2 renderer for increased performance and smaller library size. Not enabled by default. To use, include 'SVG2' in the renderers array of your OpenLayers.Layer.Vector instance. r=crschmidt (closes #2802)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11616 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

examples/marker-shadow.html

@@ -33,6 +33,10 @@
         function init() {
             map = new OpenLayers.Map("map");
             
+            // allow testing of specific renderers via "?renderer=Canvas", etc
+            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
             layer = new OpenLayers.Layer.Vector(
                 "Marker Drop Shadows",
                 {
@@ -55,7 +59,8 @@
                         pointRadius: 10
                     }),
                     isBaseLayer: true,
-                    rendererOptions: {yOrdering: true}
+                    rendererOptions: {yOrdering: true},
+                    renderers: renderer
                 }
             );
             

examples/ordering.html

@@ -32,6 +32,10 @@
         function initYOrderMap() {
             var map = new OpenLayers.Map("yorder");
             
+            // allow testing of specific renderers via "?renderer=Canvas", etc
+            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
             var layer = new OpenLayers.Layer.Vector(
                 "Y-Order",
                 {
@@ -41,7 +45,8 @@
                         graphicZIndex: GOLD_Z_INDEX
                     }),
                     isBaseLayer: true,
-                    rendererOptions: {yOrdering: true}
+                    rendererOptions: {yOrdering: true},
+                    renderers: renderer
                 }
             );
             

examples/snap-split.html

@@ -92,6 +92,10 @@
                 })
             });
 
+            // allow testing of specific renderers via "?renderer=Canvas", etc
+            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
             // create three vector layers
             vectors = new OpenLayers.Layer.Vector("Lines", {
                 isBaseLayer: true,
@@ -103,7 +107,8 @@
                 styleMap: styles,
                 maxExtent: new OpenLayers.Bounds(
                     1549471.9221, 6403610.94, 1550001.32545, 6404015.8
-                )
+                ),
+                renderers: renderer
             });
             map.addLayer(vectors);
             

examples/vector-features.html

@@ -16,6 +16,10 @@
                     "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
             map.addLayer(layer);
 
+            // allow testing of specific renderers via "?renderer=Canvas", etc
+            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
             /*
              * Layer style
              */
@@ -68,7 +72,10 @@
             // graphicTitle only works in Firefox and Internet Explorer
             style_mark.graphicTitle = "this is a test tooltip";
 
-            var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});
+            var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
+                style: layer_style,
+                renderers: renderer
+            });
 
             // create a point feature
             var point = new OpenLayers.Geometry.Point(-111.04, 45.68);

examples/wfs-states.js

@@ -10,13 +10,18 @@ function init() {
     );
     map.addLayer(base);
 
+    // allow testing of specific renderers via "?renderer=Canvas", etc
+    var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+    renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
     var wfs = new OpenLayers.Layer.Vector("States", {
         strategies: [new OpenLayers.Strategy.BBOX()],
         protocol: new OpenLayers.Protocol.WFS({
             url: "http://demo.opengeo.org/geoserver/wfs",
             featureType: "states",
             featureNS: "http://www.openplans.org/topp"
-        })
+        }),
+        renderers: renderer
     });
     map.addLayer(wfs);
 

lib/OpenLayers.js

@@ -223,7 +223,9 @@
                 "OpenLayers/Geometry/Surface.js",
                 "OpenLayers/Renderer.js",
                 "OpenLayers/Renderer/Elements.js",
+                "OpenLayers/Renderer/NG.js",
                 "OpenLayers/Renderer/SVG.js",
+                "OpenLayers/Renderer/SVG2.js",
                 "OpenLayers/Renderer/Canvas.js",
                 "OpenLayers/Renderer/VML.js",
                 "OpenLayers/Layer/Vector.js",

lib/OpenLayers/Layer/Vector.js

@@ -472,34 +472,38 @@ OpenLayers.Layer.Vector = OpenLayers.Class(OpenLayers.Layer, {
     moveTo: function(bounds, zoomChanged, dragging) {
         OpenLayers.Layer.prototype.moveTo.apply(this, arguments);
         
-        var coordSysUnchanged = true;
+        var ng = (this.renderer instanceof OpenLayers.Renderer.NG);
+        if (ng) {
+            zoomChanged && this.renderer.updateDimensions();
+        } else {
+            var coordSysUnchanged = true;
 
-        if (!dragging) {
+            if (!dragging) {
-            this.renderer.root.style.visibility = "hidden";
+                this.renderer.root.style.visibility = "hidden";
             
-            this.div.style.left = -parseInt(this.map.layerContainerDiv.style.left) + "px";
+                this.div.style.left = -parseInt(this.map.layerContainerDiv.style.left) + "px";
-            this.div.style.top = -parseInt(this.map.layerContainerDiv.style.top) + "px";
+                this.div.style.top = -parseInt(this.map.layerContainerDiv.style.top) + "px";
-            var extent = this.map.getExtent();
+                var extent = this.map.getExtent();
-            coordSysUnchanged = this.renderer.setExtent(extent, zoomChanged);
+                coordSysUnchanged = this.renderer.setExtent(extent, zoomChanged);
             
-            this.renderer.root.style.visibility = "visible";
+                this.renderer.root.style.visibility = "visible";
 
-            // Force a reflow on gecko based browsers to prevent jump/flicker.
+                // Force a reflow on gecko based browsers to prevent jump/flicker.
-            // This seems to happen on only certain configurations; it was originally
+                // This seems to happen on only certain configurations; it was originally
-            // noticed in FF 2.0 and Linux.
+                // noticed in FF 2.0 and Linux.
-            if (OpenLayers.IS_GECKO === true) {
+                if (OpenLayers.IS_GECKO === true) {
-                this.div.scrollLeft = this.div.scrollLeft;
+                    this.div.scrollLeft = this.div.scrollLeft;
-            }
+                }
             
-            if(!zoomChanged && coordSysUnchanged) {
+                if(!zoomChanged && coordSysUnchanged) {
-                for(var i in this.unrenderedFeatures) {
+                    for(var i in this.unrenderedFeatures) {
-                    var feature = this.unrenderedFeatures[i];
+                        var feature = this.unrenderedFeatures[i];
-                    this.drawFeature(feature);
+                        this.drawFeature(feature);
+                    }
                 }
             }
         }
-        
+        if (!this.drawn || (!ng && (zoomChanged || !coordSysUnchanged))) {
-        if (!this.drawn || zoomChanged || !coordSysUnchanged) {
             this.drawn = true;
             var feature;
             for(var i=0, len=this.features.length; i<len; i++) {
@@ -510,6 +514,20 @@ OpenLayers.Layer.Vector = OpenLayers.Class(OpenLayers.Layer, {
         }    
     },
     
+    /**
+     * APIMethod: redraw
+     * Redraws the layer.  Returns true if the layer was redrawn, false if not.
+     *
+     * Returns:
+     * {Boolean} The layer was redrawn.
+     */
+    redraw: function() {
+        if (this.renderer instanceof OpenLayers.Renderer.NG) {
+            this.drawn = false;
+        }
+        return OpenLayers.Layer.prototype.redraw.apply(this, arguments);
+    },
+    
     /** 
      * APIMethod: display
      * Hide or show the Layer

lib/OpenLayers/Renderer/NG.js

@@ -0,0 +1,141 @@
+/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for 
+ * full list of contributors). Published under the Clear BSD license.  
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/Renderer/Elements.js
+ */
+
+/**
+ * Class: OpenLayers.Renderer.NG
+ * 
+ * Inherits from:
+ *  - <OpenLayers.Renderer.Elements>
+ */
+OpenLayers.Renderer.NG = OpenLayers.Class(OpenLayers.Renderer.Elements, {
+    
+    /**
+     * Constant: labelNodeType
+     * {String} The node type for text label containers. To be defined by
+     * subclasses.
+     */
+    labelNodeType: null,
+    
+    /**
+     * Constructor: OpenLayers.Renderer.NG
+     * 
+     * Parameters:
+     * containerID - {String}
+     * options - {Object} options for this renderer. Supported options are:
+     *     * yOrdering - {Boolean} Whether to use y-ordering
+     *     * zIndexing - {Boolean} Whether to use z-indexing. Will be ignored
+     *         if yOrdering is set to true.
+     */
+    initialize: function(containerID, options) {
+        OpenLayers.Renderer.Elements.prototype.initialize.apply(this, arguments);
+    },
+
+    /**
+     * Method: destroy
+     */
+    destroy: function() {
+        OpenLayers.Renderer.Elements.prototype.destroy.apply(this, arguments);
+    },
+
+    /**
+     * Method: updateDimensions
+     * To be extended by subclasses - here we set positioning related styles
+     * on HTML elements, subclasses have to do the same for renderer specific
+     * elements (e.g. viesBox, width and height of the rendererRoot)
+     */
+    updateDimensions: function() {
+        var mapExtent = this.map.getExtent();
+        var renderExtent = this.map.getMaxExtent();
+        this.setExtent(renderExtent, true);
+        var res = this.getResolution();
+        var div = this.rendererRoot.parentNode;
+        var layerLeft = parseFloat(div.parentNode.style.left);
+        var layerTop = parseFloat(div.parentNode.style.top);
+        div.style.left = ((renderExtent.left - mapExtent.left) / res - layerLeft) + "px";
+        div.style.top = ((mapExtent.top - renderExtent.top) / res - layerTop) + "px";
+    },
+    
+    /**
+     * Method: resize
+     */
+    setSize: function() {
+        this.map.getExtent() && this.updateDimensions();
+    },
+
+    /**
+     * Method: drawFeature
+     * Draw the feature.  The optional style argument can be used
+     * to override the feature's own style.  This method should only
+     * be called from layer.drawFeature().
+     *
+     * Parameters:
+     * feature - {<OpenLayers.Feature.Vector>} 
+     * style - {<Object>}
+     * 
+     * Returns:
+     * {Boolean} true if the feature has been drawn completely, false if not,
+     *     undefined if the feature had no geometry
+     */
+    drawFeature: function(feature, style) {
+        if(style == null) {
+            style = feature.style;
+        }
+        if (feature.geometry) {
+            var rendered = this.drawGeometry(feature.geometry, style, feature.id);
+            if(rendered !== false && style.label) {
+                var location = feature.geometry.getCentroid(); 
+                this.drawText(feature.id, style, location);
+            } else {
+                this.removeText(feature.id);
+            }
+            return rendered;
+        }
+    },
+    
+    /**
+     * Method: drawText
+     * Function for drawing text labels.
+     * This method is only called by the renderer itself.
+     * 
+     * Parameters: 
+     * featureId - {String|DOMElement}
+     * style - {Object}
+     * location - {<OpenLayers.Geometry.Point>}, will be modified inline
+     *
+     * Returns:
+     * {DOMElement} container holding the text label (to be populated by
+     * subclasses)
+     */
+    drawText: function(featureId, style, location) {
+        var label;
+        if (typeof featureId !== "string") {
+            label = featureId;
+        } else {
+            label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, this.labelNodeType);
+            label._featureId = featureId;
+        }
+        label._style = style;
+        label._x = location.x;
+        label._y = location.y;
+        if(style.labelXOffset || style.labelYOffset) {
+            xOffset = isNaN(style.labelXOffset) ? 0 : style.labelXOffset;
+            yOffset = isNaN(style.labelYOffset) ? 0 : style.labelYOffset;
+            var res = this.getResolution();
+            location.move(xOffset*res, yOffset*res);
+        }
+
+        if(label.parentNode !== this.textRoot) {
+            this.textRoot.appendChild(label);
+        }   
+
+        return label;
+    },
+
+    CLASS_NAME: "OpenLayers.Renderer.NG"
+});

lib/OpenLayers/Renderer/SVG2.js

@@ -0,0 +1,769 @@
+/* Copyright (c) 2006-2011 by OpenLayers Contributors (see authors.txt for 
+ * full list of contributors). Published under the Clear BSD license.  
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/Renderer/NG.js
+ */
+
+/**
+ * Class: OpenLayers.Renderer.SVG2
+ * 
+ * Inherits from:
+ *  - <OpenLayers.Renderer.NG>
+ */
+OpenLayers.Renderer.SVG2 = OpenLayers.Class(OpenLayers.Renderer.NG, {
+
+    /** 
+     * Property: xmlns
+     * {String}
+     */
+    xmlns: "http://www.w3.org/2000/svg",
+    
+    /**
+     * Property: xlinkns
+     * {String}
+     */
+    xlinkns: "http://www.w3.org/1999/xlink",
+
+    /**
+     * Property: symbolMetrics
+     * {Object} Cache for symbol metrics according to their svg coordinate
+     *     space. This is an object keyed by the symbol's id, and values are
+     *     an object with size, x and y properties.
+     */
+    symbolMetrics: null,
+    
+    /**
+     * Constant: labelNodeType
+     * {String} The node type for text label containers.
+     */
+    labelNodeType: "g",
+
+    /**
+     * Constructor: OpenLayers.Renderer.SVG
+     * 
+     * Parameters:
+     * containerID - {String}
+     */
+    initialize: function(containerID) {
+        if (!this.supported()) { 
+            return; 
+        }
+        OpenLayers.Renderer.Elements.prototype.initialize.apply(this, 
+                                                                arguments);
+        
+        this.symbolMetrics = {};
+    },
+
+    /**
+     * APIMethod: destroy
+     */
+    destroy: function() {
+        OpenLayers.Renderer.Elements.prototype.destroy.apply(this, arguments);
+    },
+    
+    /**
+     * APIMethod: supported
+     * 
+     * Returns:
+     * {Boolean} Whether or not the browser supports the SVG renderer
+     */
+    supported: function() {
+        var svgFeature = "http://www.w3.org/TR/SVG11/feature#";
+        return (document.implementation && 
+           (document.implementation.hasFeature("org.w3c.svg", "1.0") || 
+            document.implementation.hasFeature(svgFeature + "SVG", "1.1") || 
+            document.implementation.hasFeature(svgFeature + "BasicStructure", "1.1") ));
+    },    
+
+    /**
+     * Method: updateDimensions
+     */
+    updateDimensions: function() {
+        OpenLayers.Renderer.NG.prototype.updateDimensions.apply(this, arguments);
+        
+        var res = this.getResolution();
+        
+        var width = this.extent.getWidth();
+        var height = this.extent.getHeight();
+        
+        var extentString = [
+            this.extent.left,
+            -this.extent.top,
+            width,
+            height
+        ].join(" ");
+        this.rendererRoot.setAttributeNS(null, "viewBox", extentString);
+        this.rendererRoot.setAttributeNS(null, "width", width / res);
+        this.rendererRoot.setAttributeNS(null, "height", height / res);
+
+        // update styles for the new resolution
+        var nodes = this.vectorRoot.childNodes;
+        for (var i=0, len=nodes.length; i<len; ++i) {
+            this.setStyle(nodes[i]);
+        }
+        var textNodes = this.textRoot.childNodes;
+        var label;
+        for (var i=0, len=textNodes.length; i<len; ++i) {
+            var label = textNodes[i];
+            this.drawText(label, label._style,
+                new OpenLayers.Geometry.Point(label._x, label._y)
+            );
+        }
+    },
+    
+    /** 
+     * Method: getNodeType
+     * 
+     * Parameters:
+     * geometry - {<OpenLayers.Geometry>}
+     * style - {Object}
+     * 
+     * Returns:
+     * {String} The corresponding node type for the specified geometry
+     */
+    getNodeType: function(geometry, style) {
+        var nodeType = null;
+        switch (geometry.CLASS_NAME) {
+            case "OpenLayers.Geometry.Point":
+                if (style.externalGraphic) {
+                    nodeType = "image";
+                } else if (this.isComplexSymbol(style.graphicName)) {
+                    nodeType = "svg";
+                } else {
+                    nodeType = "circle";
+                }
+                break;
+            case "OpenLayers.Geometry.Rectangle":
+                nodeType = "rect";
+                break;
+            case "OpenLayers.Geometry.LineString":
+                nodeType = "polyline";
+                break;
+            case "OpenLayers.Geometry.LinearRing":
+                nodeType = "polygon";
+                break;
+            case "OpenLayers.Geometry.Polygon":
+            case "OpenLayers.Geometry.Curve":
+            case "OpenLayers.Geometry.Surface":
+                nodeType = "path";
+                break;
+            default:
+                break;
+        }
+        return nodeType;
+    },
+
+    /** 
+     * Method: setStyle
+     * Use to set all the style attributes to a SVG node.
+     * 
+     * Takes care to adjust stroke width and point radius to be
+     * resolution-relative
+     *
+     * Parameters:
+     * node - {SVGDomElement} An SVG element to decorate
+     * style - {Object}
+     * options - {Object} Currently supported options include 
+     *                              'isFilled' {Boolean} and
+     *                              'isStroked' {Boolean}
+     */
+    setStyle: function(node, style, options) {
+        style = style  || node._style;
+        options = options || node._options;
+        var resolution = this.getResolution();
+        var r = node._radius;
+        var widthFactor = resolution;
+        if (node._geometryClass == "OpenLayers.Geometry.Point" && r) {
+            node.style.visibility = "";
+            if (style.graphic === false) {
+                node.style.visibility = "hidden";
+            } else if (style.externalGraphic) {
+                
+                if (style.graphicTitle) {
+                    node.setAttributeNS(null, "title", style.graphicTitle);
+                    //Standards-conformant SVG 
+                    var label = this.nodeFactory(null, "title"); 
+                    label.textContent = style.graphicTitle; 
+                    node.appendChild(label); 
+                }
+                if (style.graphicWidth && style.graphicHeight) {
+                    node.setAttributeNS(null, "preserveAspectRatio", "none");
+                }
+                var width = style.graphicWidth || style.graphicHeight;
+                var height = style.graphicHeight || style.graphicWidth;
+                width = width ? width : style.pointRadius*2;
+                height = height ? height : style.pointRadius*2;
+                width *= resolution;
+                height *= resolution;
+                
+                var xOffset = (style.graphicXOffset != undefined) ?
+                    style.graphicXOffset * resolution : -(0.5 * width);
+                var yOffset = (style.graphicYOffset != undefined) ?
+                    style.graphicYOffset * resolution : -(0.5 * height);
+
+                var opacity = style.graphicOpacity || style.fillOpacity;
+                
+                node.setAttributeNS(null, "x", node._x + xOffset);
+                node.setAttributeNS(null, "y", node._y + yOffset);
+                node.setAttributeNS(null, "width", width);
+                node.setAttributeNS(null, "height", height);
+                node.setAttributeNS(this.xlinkns, "href", style.externalGraphic);
+                node.setAttributeNS(null, "style", "opacity: "+opacity);
+                node.onclick = OpenLayers.Renderer.SVG2.preventDefault;
+            } else if (this.isComplexSymbol(style.graphicName)) {
+                // the symbol viewBox is three times as large as the symbol
+                var offset = style.pointRadius * 3 * resolution;
+                var size = offset * 2;
+                var id = this.importSymbol(style.graphicName);
+                widthFactor = this.symbolMetrics[id].size * 3 / size * resolution;
+                
+                // remove the node from the dom before we modify it. This
+                // prevents various rendering issues in Safari and FF
+                var parent = node.parentNode;
+                var nextSibling = node.nextSibling;
+                if(parent) {
+                    parent.removeChild(node);
+                }
+                
+                // The more appropriate way to implement this would be use/defs, 
+                // but due to various issues in several browsers, it is safer to 
+                // copy the symbols instead of referencing them.  
+                // See e.g. ticket http://trac.osgeo.org/openlayers/ticket/2985  
+                // and this email thread 
+                // http://osgeo-org.1803224.n2.nabble.com/Select-Control-Ctrl-click-on-Feature-with-a-graphicName-opens-new-browser-window-tc5846039.html 
+                var src = document.getElementById(id); 
+                node.firstChild && node.removeChild(node.firstChild); 
+                node.appendChild(src.firstChild.cloneNode(true)); 
+                node.setAttributeNS(null, "viewBox", src.getAttributeNS(null, "viewBox")); 
+
+                node.setAttributeNS(null, "width", size);
+                node.setAttributeNS(null, "height", size);
+                node.setAttributeNS(null, "x", node._x - offset);
+                node.setAttributeNS(null, "y", node._y - offset);
+                
+                // now that the node has all its new properties, insert it
+                // back into the dom where it was
+                if(nextSibling) {
+                    parent.insertBefore(node, nextSibling);
+                } else if(parent) {
+                    parent.appendChild(node);
+                }
+            } else {
+                node.setAttributeNS(null, "r", style.pointRadius * resolution);
+            }
+
+            var rotation = style.rotation;
+            if (rotation !== undefined || node._rotation !== undefined) {
+                node._rotation = rotation;
+                rotation |= 0;
+                if (node.nodeName !== "svg") { 
+                    node.setAttributeNS(null, "transform", 
+                        ["rotate(", rotation, node._x, node._y, ")"].join(" ")
+                    ); 
+                } else {
+                    var metrics = this.symbolMetrics[id]; 
+                    node.firstChild.setAttributeNS(null, "transform",
+                        ["rotate(", rotation, metrics.x, metrics.y, ")"].join(" ")
+                    );
+                }
+            }
+        }
+        
+        if (options.isFilled) {
+            node.setAttributeNS(null, "fill", style.fillColor);
+            node.setAttributeNS(null, "fill-opacity", style.fillOpacity);
+        } else {
+            node.setAttributeNS(null, "fill", "none");
+        }
+
+        if (options.isStroked) {
+            node.setAttributeNS(null, "stroke", style.strokeColor);
+            node.setAttributeNS(null, "stroke-opacity", style.strokeOpacity);
+            node.setAttributeNS(null, "stroke-width", style.strokeWidth * widthFactor);
+            node.setAttributeNS(null, "stroke-linecap", style.strokeLinecap || "round");
+            // Hard-coded linejoin for now, to make it look the same as in VML.
+            // There is no strokeLinejoin property yet for symbolizers.
+            node.setAttributeNS(null, "stroke-linejoin", "round");
+            style.strokeDashstyle && node.setAttributeNS(null,
+                "stroke-dasharray", this.dashStyle(style, widthFactor));
+        } else {
+            node.setAttributeNS(null, "stroke", "none");
+        }
+        
+        if (style.pointerEvents) {
+            node.setAttributeNS(null, "pointer-events", style.pointerEvents);
+        }
+                
+        if (style.cursor != null) {
+            node.setAttributeNS(null, "cursor", style.cursor);
+        }
+        
+        return node;
+    },
+
+    /** 
+     * Method: dashStyle
+     * 
+     * Parameters:
+     * style - {Object}
+     * widthFactor - {Number}
+     * 
+     * Returns:
+     * {String} A SVG compliant 'stroke-dasharray' value
+     */
+    dashStyle: function(style, widthFactor) {
+        var w = style.strokeWidth * widthFactor;
+        var str = style.strokeDashstyle;
+        switch (str) {
+            case 'solid':
+                return 'none';
+            case 'dot':
+                return [widthFactor, 4 * w].join();
+            case 'dash':
+                return [4 * w, 4 * w].join();
+            case 'dashdot':
+                return [4 * w, 4 * w, widthFactor, 4 * w].join();
+            case 'longdash':
+                return [8 * w, 4 * w].join();
+            case 'longdashdot':
+                return [8 * w, 4 * w, widthFactor, 4 * w].join();
+            default:
+                var parts = OpenLayers.String.trim(str).split(/\s+/g);
+                for (var i=0, ii=parts.length; i<ii; i++) {
+                    parts[i] = parts[i] * widthFactor;
+                }
+                return parts.join();            
+        }
+    },
+    
+    /** 
+     * Method: createNode
+     * 
+     * Parameters:
+     * type - {String} Kind of node to draw
+     * id - {String} Id for node
+     * 
+     * Returns:
+     * {DOMElement} A new node of the given type and id
+     */
+    createNode: function(type, id) {
+        var node = document.createElementNS(this.xmlns, type);
+        if (id) {
+            node.setAttributeNS(null, "id", id);
+        }
+        return node;    
+    },
+    
+    /** 
+     * Method: nodeTypeCompare
+     * 
+     * Parameters:
+     * node - {SVGDomElement} An SVG element
+     * type - {String} Kind of node
+     * 
+     * Returns:
+     * {Boolean} Whether or not the specified node is of the specified type
+     */
+    nodeTypeCompare: function(node, type) {
+        return (type == node.nodeName);
+    },
+   
+    /**
+     * Method: createRenderRoot
+     * 
+     * Returns:
+     * {DOMElement} The specific render engine's root element
+     */
+    createRenderRoot: function() {
+        return this.nodeFactory(this.container.id + "_svgRoot", "svg");
+    },
+
+    /**
+     * Method: createRoot
+     * 
+     * Parameter:
+     * suffix - {String} suffix to append to the id
+     * 
+     * Returns:
+     * {DOMElement}
+     */
+    createRoot: function(suffix) {
+        return this.nodeFactory(this.container.id + suffix, "g");
+    },
+
+    /**
+     * Method: createDefs
+     *
+     * Returns:
+     * {DOMElement} The element to which we'll add the symbol definitions
+     */
+    createDefs: function() {
+        var defs = this.nodeFactory(this.container.id + "_defs", "defs");
+        this.rendererRoot.appendChild(defs);
+        return defs;
+    },
+
+    /**************************************
+     *                                    *
+     *     GEOMETRY DRAWING FUNCTIONS     *
+     *                                    *
+     **************************************/
+
+    /**
+     * Method: drawPoint
+     * This method is only called by the renderer itself.
+     * 
+     * Parameters: 
+     * node - {DOMElement}
+     * geometry - {<OpenLayers.Geometry>}
+     * 
+     * Returns:
+     * {DOMElement} or false if the renderer could not draw the point
+     */ 
+    drawPoint: function(node, geometry) {
+        return this.drawCircle(node, geometry, 1);
+    },
+
+    /**
+     * Method: drawCircle
+     * This method is only called by the renderer itself.
+     * 
+     * Parameters: 
+     * node - {DOMElement}
+     * geometry - {<OpenLayers.Geometry>}
+     * radius - {Float}
+     * 
+     * Returns:
+     * {DOMElement} or false if the renderer could not draw the circle
+     */
+    drawCircle: function(node, geometry, radius) {
+        var x = geometry.x;
+        var y = -geometry.y;
+        node.setAttributeNS(null, "cx", x);
+        node.setAttributeNS(null, "cy", y);
+        node._x = x;
+        node._y = y;
+        node._radius = radius;
+        return node;
+    },
+    
+    /**
+     * Method: drawLineString
+     * This method is only called by the renderer itself.
+     * 
+     * Parameters: 
+     * node - {DOMElement}
+     * geometry - {<OpenLayers.Geometry>}
+     * 
+     * Returns:
+     * {DOMElement} or null if the renderer could not draw all components of
+     *     the linestring, or false if nothing could be drawn
+     */ 
+    drawLineString: function(node, geometry) {
+        var path = this.getComponentsString(geometry.components);
+        node.setAttributeNS(null, "points", path);
+        return node;
+    },
+    
+    /**
+     * Method: drawLinearRing
+     * This method is only called by the renderer itself.
+     * 
+     * Parameters: 
+     * node - {DOMElement}
+     * geometry - {<OpenLayers.Geometry>}
+     * 
+     * Returns:
+     * {DOMElement} or null if the renderer could not draw all components
+     *     of the linear ring, or false if nothing could be drawn
+     */ 
+    drawLinearRing: function(node, geometry) {
+        var path = this.getComponentsString(geometry.components);
+        node.setAttributeNS(null, "points", path);
+        return node;
+    },
+    
+    /**
+     * Method: drawPolygon
+     * This method is only called by the renderer itself.
+     * 
+     * Parameters: 
+     * node - {DOMElement}
+     * geometry - {<OpenLayers.Geometry>}
+     * 
+     * Returns:
+     * {DOMElement} or null if the renderer could not draw all components
+     *     of the polygon, or false if nothing could be drawn
+     */ 
+    drawPolygon: function(node, geometry) {
+        var d = [];
+        var draw = true;
+        var complete = true;
+        var linearRingResult, path;
+        for (var j=0, len=geometry.components.length; j<len; j++) {
+            d.push("M");
+            path = this.getComponentsString(
+                geometry.components[j].components, " ");
+            d.push(path);
+        }
+        d.push("z");
+        node.setAttributeNS(null, "d", d.join(" "));
+        node.setAttributeNS(null, "fill-rule", "evenodd");
+        return node;
+    },
+    
+    /**
+     * Method: drawRectangle
+     * This method is only called by the renderer itself.
+     * 
+     * Parameters: 
+     * node - {DOMElement}
+     * geometry - {<OpenLayers.Geometry>}
+     * 
+     * Returns:
+     * {DOMElement} or false if the renderer could not draw the rectangle
+     */ 
+    drawRectangle: function(node, geometry) {
+        node.setAttributeNS(null, "x", geometry.x);
+        node.setAttributeNS(null, "y", -geometry.y);
+        node.setAttributeNS(null, "width", geometry.width);
+        node.setAttributeNS(null, "height", geometry.height);
+        return node;
+    },
+    
+    /**
+     * Method: drawSurface
+     * This method is only called by the renderer itself.
+     * 
+     * Parameters: 
+     * node - {DOMElement}
+     * geometry - {<OpenLayers.Geometry>}
+     * 
+     * Returns:
+     * {DOMElement} or false if the renderer could not draw the surface
+     */ 
+    drawSurface: function(node, geometry) {
+
+        // create the svg path string representation
+        var d = [];
+        var draw = true;
+        for (var i=0, len=geometry.components.length; i<len; i++) {
+            if ((i%3) == 0 && (i/3) == 0) {
+                var component = this.getShortString(geometry.components[i]);
+                d.push("M", component);
+            } else if ((i%3) == 1) {
+                var component = this.getShortString(geometry.components[i]);
+                d.push("C", component);
+            } else {
+                var component = this.getShortString(geometry.components[i]);
+                d.push(component);
+            }
+        }
+        d.push("Z");
+        node.setAttributeNS(null, "d", d.join(" "));
+        return node;
+    },
+    
+    /**
+     * Method: drawText
+     * Function for drawing text labels.
+     * This method is only called by the renderer itself.
+     * 
+     * Parameters: 
+     * featureId - {String|DOMElement}
+     * style - {Object}
+     * location - {<OpenLayers.Geometry.Point>}, will be modified inline
+     *
+     * Returns:
+     * {DOMElement} container holding the text label
+     */
+    drawText: function(featureId, style, location) {
+        var g = OpenLayers.Renderer.NG.prototype.drawText.apply(this, arguments);
+        var text = g.firstChild ||
+            this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_text", "text");
+        var tspan = text.firstChild ||
+            this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_tspan", "tspan");
+
+        var res = this.getResolution();
+        text.setAttributeNS(null, "x", location.x / res);
+        text.setAttributeNS(null, "y", - location.y / res);
+        g.setAttributeNS(null, "transform", "scale(" + res + ")");
+        
+        if (style.fontColor) {
+            text.setAttributeNS(null, "fill", style.fontColor);
+        }
+        if (style.fontOpacity) {
+            text.setAttributeNS(null, "opacity", style.fontOpacity);
+        }
+        if (style.fontFamily) {
+            text.setAttributeNS(null, "font-family", style.fontFamily);
+        }
+        if (style.fontSize) {
+            text.setAttributeNS(null, "font-size", style.fontSize);
+        }
+        if (style.fontWeight) {
+            text.setAttributeNS(null, "font-weight", style.fontWeight);
+        }
+        if(style.labelSelect === true) {
+            text.setAttributeNS(null, "pointer-events", "visible");
+            text._featureId = featureId;
+            tspan._featureId = featureId;
+        } else {
+            text.setAttributeNS(null, "pointer-events", "none");
+        }
+        var align = style.labelAlign || "cm";
+        text.setAttributeNS(null, "text-anchor",
+            OpenLayers.Renderer.SVG.LABEL_ALIGN[align[0]] || "middle");
+
+        if (OpenLayers.IS_GECKO === true) {
+            text.setAttributeNS(null, "dominant-baseline",
+                OpenLayers.Renderer.SVG.LABEL_ALIGN[align[1]] || "central");
+        } else {
+            tspan.setAttributeNS(null, "baseline-shift",
+                OpenLayers.Renderer.SVG.LABEL_VSHIFT[align[1]] || "-35%");
+        }
+
+        tspan.textContent = style.label;
+        
+        if(!text.parentNode) {
+            text.appendChild(tspan);
+            g.appendChild(text);
+        }
+        
+        return g;
+    },
+    
+    /** 
+     * Method: getComponentString
+     * 
+     * Parameters:
+     * components - {Array(<OpenLayers.Geometry.Point>)} Array of points
+     * separator - {String} character between coordinate pairs. Defaults to ","
+     * 
+     * Returns:
+     * {Object} hash with properties "path" (the string created from the
+     *     components and "complete" (false if the renderer was unable to
+     *     draw all components)
+     */
+    getComponentsString: function(components, separator) {
+        var len = components.length;
+        var strings = new Array(len);
+        for(var i=0; i<len; i++) {
+            component = components[i];
+            strings[i] = this.getShortString(component);
+        }
+
+        return strings.join(separator || ",");
+    },
+    
+    /** 
+     * Method: getShortString
+     * 
+     * Parameters:
+     * point - {<OpenLayers.Geometry.Point>}
+     * 
+     * Returns:
+     * {String} or false if point is outside the valid range
+     */
+    getShortString: function(point) {
+        return point.x + "," + (-point.y);
+    },
+    
+    /**
+     * Method: importSymbol
+     * add a new symbol definition from the rendererer's symbol hash
+     * 
+     * Parameters:
+     * graphicName - {String} name of the symbol to import
+     * 
+     * Returns:
+     * {String} - id of the imported symbol
+     */      
+    importSymbol: function (graphicName)  {
+        if (!this.defs) {
+            // create svg defs tag
+            this.defs = this.createDefs();
+        }
+        var id = this.container.id + "-" + graphicName;
+        
+        // check if symbol already exists in the defs
+        if (document.getElementById(id) != null) {
+            return id;
+        }
+        
+        var symbol = OpenLayers.Renderer.symbol[graphicName];
+        if (!symbol) {
+            throw new Error(graphicName + ' is not a valid symbol name');
+        }
+
+        var symbolNode = this.nodeFactory(id, "symbol");
+        var node = this.nodeFactory(null, "polygon");
+        symbolNode.appendChild(node);
+        var symbolExtent = new OpenLayers.Bounds(
+                                    Number.MAX_VALUE, Number.MAX_VALUE, 0, 0);
+
+        var points = [];
+        var x,y;
+        for (var i=0, len=symbol.length; i<len; i=i+2) {
+            x = symbol[i];
+            y = symbol[i+1];
+            symbolExtent.left = Math.min(symbolExtent.left, x);
+            symbolExtent.bottom = Math.min(symbolExtent.bottom, y);
+            symbolExtent.right = Math.max(symbolExtent.right, x);
+            symbolExtent.top = Math.max(symbolExtent.top, y);
+            points.push(x, ",", y);
+        }
+        
+        node.setAttributeNS(null, "points", points.join(" "));
+        
+        var width = symbolExtent.getWidth();
+        var height = symbolExtent.getHeight();
+        // create a viewBox three times as large as the symbol itself,
+        // to allow for strokeWidth being displayed correctly at the corners.
+        var viewBox = [symbolExtent.left - width,
+                        symbolExtent.bottom - height, width * 3, height * 3];
+        symbolNode.setAttributeNS(null, "viewBox", viewBox.join(" "));
+        this.symbolMetrics[id] = {
+            size: Math.max(width, height),
+            x: symbolExtent.getCenterLonLat().lon,
+            y: symbolExtent.getCenterLonLat().lat
+        };
+        
+        this.defs.appendChild(symbolNode);
+        return symbolNode.id;
+    },
+    
+    /**
+     * Method: getFeatureIdFromEvent
+     * 
+     * Parameters:
+     * evt - {Object} An <OpenLayers.Event> object
+     *
+     * Returns:
+     * {<OpenLayers.Geometry>} A geometry from an event that 
+     *     happened on a layer.
+     */
+    getFeatureIdFromEvent: function(evt) {
+        var featureId = OpenLayers.Renderer.Elements.prototype.getFeatureIdFromEvent.apply(this, arguments);
+        if(!featureId) {
+            var target = evt.target;
+            featureId = target.parentNode && target != this.rendererRoot &&
+                target.parentNode._featureId;
+        }
+        return featureId;
+    },
+
+    CLASS_NAME: "OpenLayers.Renderer.SVG2"
+});
+
+/** 
+ * Function: OpenLayers.Renderer.SVG2.preventDefault 
+ * Used to prevent default events (especially opening images in a new tab on 
+ * ctrl-click) from being executed for externalGraphic and graphicName symbols 
+ */ 
+OpenLayers.Renderer.SVG2.preventDefault = function(e) { 
+    e.preventDefault && e.preventDefault(); 
+};

tests/Layer/Vector.html

@@ -458,9 +458,7 @@
         t.plan(9);
         
         var map = new OpenLayers.Map("map");
-        var layer = new OpenLayers.Layer.Vector(null, {
+        var layer = new OpenLayers.Layer.Vector();
-            drawn: true
-        });
         map.addLayer(layer);
         var feature = new OpenLayers.Feature.Vector(
             new OpenLayers.Geometry.Point(10, 10)
@@ -477,6 +475,7 @@
         };
         
         // draw feature with no state
+        layer.drawn = true;
         layer.drawFeature(feature);
         t.ok(log.feature === feature, "[no state] drawFeature called with correct feature");
         t.ok(log.style.display !== "none", "[no state] drawFeature called with style display not none");
@@ -707,6 +706,54 @@
                         (-y + customStyle6.graphicYOffset).toFixed().toString(),
                         "graphicYOffset correctly set");
         }
+        if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.SVG2') {
+                feature.style = customStyle1;
+                layer.drawFeature(feature);
+                var resolution = map.getResolution();
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                             (2*customStyle1.pointRadius*resolution).toString(),
+                             "given a pointRadius, width equals 2*pointRadius");
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                             (2*customStyle1.pointRadius*resolution).toString(),
+                             "given a pointRadius, height equals 2*pointRadius");
+                feature.style = customStyle2;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                             root.firstChild.getAttributeNS(null, 'height'),
+                             "given a graphicWidth, width equals height");
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                             (customStyle2.graphicWidth*resolution).toString(),
+                             "width is set correctly");
+                feature.style = customStyle3;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                             root.firstChild.getAttributeNS(null, 'width'),
+                             "given a graphicHeight, height equals width");
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                             (customStyle3.graphicHeight*resolution).toString(),
+                             "height is set correctly");
+                feature.style = customStyle4;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                             (customStyle4.graphicHeight*resolution).toString(),
+                             "given graphicHeight and graphicWidth, both are set: height");
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                             (customStyle4.graphicWidth*resolution).toString(),
+                             "given graphicHeight and graphicWidth, both are set: width");
+                feature.style = customStyle5;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'style'),
+                             'opacity: '+customStyle5.graphicOpacity.toString()+((OpenLayers.Util.getBrowserName() == "opera" || OpenLayers.Util.getBrowserName() == "safari") ? "" : ';'),
+                             "graphicOpacity correctly set");
+                feature.style = customStyle6;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'x'),
+                        (geometryX + customStyle6.graphicXOffset*resolution).toString(),
+                        "graphicXOffset correctly set");
+                t.eq(root.firstChild.getAttributeNS(null, 'y'),
+                        (-geometryY + customStyle6.graphicYOffset*resolution).toString(),
+                        "graphicYOffset correctly set");
+        }
         if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.VML') {
                 feature.style = customStyle1;
                 layer.drawFeature(feature);

tests/Renderer/SVG2.html

@@ -0,0 +1,424 @@
+<html>
+<head>
+<script src="../OLLoader.js"></script>
+  <script type="text/javascript">
+
+    var geometry = null, node = null;
+    
+    function test_SVG_constructor(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(1);
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        t.ok(r instanceof OpenLayers.Renderer.SVG2, "new OpenLayers.Renderer.SVG2 returns SVG object" );
+    }
+    
+    function test_SVG_destroy(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(1);
+        
+        var g_Destroy = false;
+        
+        OpenLayers.Renderer.Elements.prototype._destroy = 
+            OpenLayers.Renderer.Elements.prototype.destroy;
+            
+        OpenLayers.Renderer.prototype.destroy = function() {
+            g_Destroy = true;
+        }
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        r.destroy();
+        
+        t.eq(g_Destroy, true, "OpenLayers.Renderer.Elements.destroy() called");
+        
+        OpenLayers.Renderer.prototype.destroy = 
+            OpenLayers.Renderer.prototype._destroy;
+    }
+    
+    function test_SVG_updateDimensions(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(5);
+        
+        OpenLayers.Renderer.SVG2.prototype._setExtent =
+            OpenLayers.Renderer.SVG2.prototype.setExtent;
+        
+        var g_SetExtent = false;
+        OpenLayers.Renderer.SVG2.prototype.setExtent = function() {
+            g_SetExtent = true;
+            OpenLayers.Renderer.SVG2.prototype._setExtent.apply(this, arguments);
+        }
+                
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        var extent = new OpenLayers.Bounds(1,2,3,4);
+        r.map = {
+            getResolution: function() {
+                return 0.5;
+            },
+            getExtent: function() {
+                return extent;
+            },
+            getMaxExtent: function() {
+                return extent;
+            }
+        }
+        r.updateDimensions();
+        
+        t.eq(g_SetExtent, true, "Elements.setExtent() called");
+        
+        t.eq(r.rendererRoot.getAttributeNS(null, "width"), "4", "width is correct");
+        t.eq(r.rendererRoot.getAttributeNS(null, "height"), "4", "height is correct");
+        t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "1 -4 2 2", "rendererRoot viewBox is correct");
+        
+        // test extent changes
+        extent = new OpenLayers.Bounds(2,3,5,6);
+        r.updateDimensions();
+        t.eq(r.rendererRoot.getAttributeNS(null, "viewBox"), "2 -6 3 3", "rendererRoot viewBox is correct after a new setExtent");
+
+        OpenLayers.Renderer.SVG2.prototype.setExtent =
+            OpenLayers.Renderer.SVG2.prototype._setExtent;
+    }
+    
+    function test_SVG_drawpoint(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+    
+        t.plan(1);
+
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        
+        var properDraw = false;
+        var g_Radius = null;
+        r.drawCircle = function(n, g, r) {
+            properDraw = true;
+            g_Radius = 1;
+        }
+        r.drawPoint();
+        
+        t.ok(properDraw && g_Radius == 1, "drawPoint called drawCircle with radius set to 1");
+    }
+    
+    function test_SVG_drawcircle(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(5);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        r.resolution = 0.5;
+        r.left = 0;
+        r.top = 0;
+        
+        var node = document.createElement('div');
+        
+        var geometry = {
+            x: 1,
+            y: 2
+        }
+        
+        r.drawCircle(node, geometry, 3);
+        
+        t.eq(node.getAttributeNS(null, 'cx'), '1', "cx is correct");
+        t.eq(node.getAttributeNS(null, 'cy'), '-2', "cy is correct");
+        t.eq(node._radius, 3, "radius preset is correct");
+       
+        // #1274: out of bound node fails when first added
+        var geometry = {
+            x: 10000000,
+            y: 200000000,
+            CLASS_NAME: "OpenLayers.Geometry.Point",
+            id: "foo",
+            getBounds: function() {return {bottom: 0}}
+        }
+        node.id = geometry.id;
+        r.root.appendChild(node);
+
+        var drawCircleCalled = false;
+        r.drawCircle = function() {
+            drawCircleCalled = true;
+            return OpenLayers.Renderer.SVG2.prototype.drawCircle.apply(r, arguments);
+        }
+        
+        r.drawGeometry(geometry, {pointRadius: 3}, "blah_4000");
+        t.eq(drawCircleCalled, true, "drawCircle called on drawGeometry for a point geometry.")
+        t.ok(node.parentNode != r.root, "circle will not be drawn when coordinates are outside the valid range");
+    }
+    
+    function test_SVG_drawlinestring(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(2);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        
+        var node = document.createElement('div');
+        
+        var geometry = {
+            components: "foo"
+        }
+        g_GetString = false;
+        g_Components = null;
+        r.getComponentsString = function(c) {
+            g_GetString = true;
+            g_Components = c;
+            return "bar";
+        }
+        
+        r.drawLineString(node, geometry);
+        
+        t.ok(g_GetString && g_Components == "foo", "getComponentString is called with valid arguments");
+        t.eq(node.getAttributeNS(null, "points"), "bar", "points attribute is correct");
+    }
+    
+    function test_SVG_drawlinearring(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(2);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        
+        var node = document.createElement('div');
+        
+        var geometry = {
+            components: "foo"
+        }
+        g_GetString = false;
+        g_Components = null;
+        r.getComponentsString = function(c) {
+            g_GetString = true;
+            g_Components = c;
+            return "bar";
+        }
+        
+        r.drawLinearRing(node, geometry);
+        
+        t.ok(g_GetString, "getComponentString is called with valid arguments");
+        t.eq(node.getAttributeNS(null, "points"), "bar", "points attribute is correct");
+    }
+
+    function test_SVG_drawpolygon(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(3);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        
+        var node = document.createElement('div');
+        
+        var linearRings = [{
+            components: ["foo"]
+        },{
+            components: ["bar"]
+        }]
+        
+        var geometry = {
+            components: linearRings
+        }
+        g_GetString = false;
+        r.getShortString = function(c) {
+            g_GetString = true;
+            return c;
+        }
+        
+        r.drawPolygon(node, geometry);
+        
+        t.ok(g_GetString, "getShortString is called");
+        t.eq(node.getAttributeNS(null, "d"), "M foo M bar z", "d attribute is correctly set");
+        t.eq(node.getAttributeNS(null, "fill-rule"), "evenodd", "fill-rule attribute is correctly set");
+    }
+
+    function test_SVG_drawrectangle(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(4);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        r.resolution = 0.5;
+        r.left = 0;
+        r.top = 0;
+        
+        var node = document.createElement('div');
+        
+        var geometry = {
+            x: 1,
+            y: 2,
+            width: 3,
+            height: 4
+        }
+        
+        r.drawRectangle(node, geometry);
+        
+        t.eq(node.getAttributeNS(null, "x"), "1", "x attribute is correctly set");
+        t.eq(node.getAttributeNS(null, "y"), "-2", "y attribute is correctly set");
+        t.eq(node.getAttributeNS(null, "width"), "3", "width attribute is correctly set");
+        t.eq(node.getAttributeNS(null, "height"), "4", "height attribute is correctly set");
+    }
+    
+    function test_SVG_drawsurface(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(2);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        
+        var node = document.createElement('div');
+        
+        var geometry = {
+            components: ['foo', 'bar', 'dude']
+        }
+        g_GetString = false;
+        r.getShortString = function(c) {
+            g_GetString = true;
+            return c;
+        }
+        
+        r.drawSurface(node, geometry);
+        
+        t.ok(g_GetString, "getShortString is called");
+        
+        t.eq(node.getAttributeNS(null, "d"), "M foo C bar dude Z", "d attribute is correctly set");
+    }
+    
+    function test_SVG_getcomponentsstring(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(1);
+        
+        var components = ['foo', 'bar'];
+        
+        OpenLayers.Renderer.SVG2.prototype._getShortString = 
+            OpenLayers.Renderer.SVG2.prototype.getShortString;
+            
+        OpenLayers.Renderer.SVG2.prototype.getShortString = function(p) {
+            return p;
+        };
+        
+        var string = OpenLayers.Renderer.SVG2.prototype.getComponentsString(components);
+        t.eq(string, "foo,bar", "returned string is correct");
+        
+        OpenLayers.Renderer.SVG2.prototype.getShortString = 
+            OpenLayers.Renderer.SVG2.prototype._getShortString;
+    }
+    
+    
+    
+    function test_SVG_getshortstring(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+        
+        t.plan(1);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+        r.resolution = 0.5;
+        r.left = 0;
+        r.top = 0;
+        
+        var point = {
+            x: 1,
+            y: 2
+        };
+        
+        var string = r.getShortString(point);
+        t.eq(string, "1,-2", "returned string is correct");
+    }
+    
+    function test_svg_getnodetype(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+
+        t.plan(1);
+         
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+
+        var g = {CLASS_NAME: "OpenLayers.Geometry.Point"}
+        var s = {graphicName: "square"};
+        
+        t.eq(r.getNodeType(g, s), "svg", "Correct node type for well known symbols");
+    }
+        
+    function test_svg_importsymbol(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+
+        t.plan(2);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+
+        r.importSymbol("square");
+
+        var polygon = document.getElementById(r.container.id + "_defs").firstChild.firstChild;
+        
+        var pass = false;
+        for (var i = 0; i < polygon.points.numberOfItems; i++) {
+            var p = polygon.points.getItem(i);
+            pass = p.x === OpenLayers.Renderer.symbol.square[2*i] && 
+                   p.y === OpenLayers.Renderer.symbol.square[2*i+1];
+            if (!pass) {
+                break;
+            }
+        }
+        t.ok(pass, "Square symbol rendered correctly");
+        t.ok(r.symbolMetrics["-square"], "Symbol metrics cached correctly.");
+    }
+        
+    function test_svg_dashstyle(t) {
+        if (!OpenLayers.Renderer.SVG2.prototype.supported()) {
+            t.plan(0);
+            return;
+        }
+
+        t.plan(5);
+        
+        var r = new OpenLayers.Renderer.SVG2(document.body);
+
+        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dot"}, 1), "1,4", "dot dasharray created correctly");
+        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dash"}, 1), "4,4", "dash dasharray created correctly");
+        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdash"}, 1), "8,4", "longdash dasharray created correctly");
+        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "dashdot"}, 1), "4,4,1,4", "dashdot dasharray created correctly");
+        t.eq(r.dashStyle({strokeWidth: 1, strokeDashstyle: "longdashdot"}, 1), "8,4,1,4", "dashdot dasharray created correctly");
+    }
+
+  </script>
+</head>
+<body>
+<div id="map" style="width:500px;height:550px"></div>
+</body>
+</html>

tests/list-tests.html

@@ -185,6 +185,7 @@
     <li>Renderer/Canvas.html</li>
     <li>Renderer/Elements.html</li>
     <li>Renderer/SVG.html</li>
+    <li>Renderer/SVG2.html</li>
     <li>Renderer/VML.html</li>
     <li>Request.html</li>
     <li>Request/XMLHttpRequest.html</li>

tests/speed/vector-renderers.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Vector Features Performance Test</title>
+    <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js#startOpened=true"></script>
+    <link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
+    <link rel="stylesheet" href="../../examples/style.css" type="text/css" />
+  </head>
+  <body>
+    <h1 id="title">Vector Rendering Performance</h1>
+    <div id="map" class="smallmap"></div>
+    <p>
+    This is a benchmark for vector rendering performance. Test results are
+    written to the debug console.
+    Select a renderer here:
+    <br/>
+    <select id="renderers"></select>
+    </p><p>
+    The benchmark shows the time needed to render the features, and how long a
+    move (drag or zoom) takes. Drag and zoom around to produce move results.
+    </p>
+    <script src="../../lib/OpenLayers.js"></script>
+    <script src="vector-renderers.js"></script>
+  </body>
+</html>

tests/speed/vector-renderers.js

@@ -0,0 +1,70 @@
+var map, vectorLayer, drawFeature, features
+
+map = new OpenLayers.Map('map', {
+    eventListeners: {
+        movestart: function() {
+            console.time("move");
+        },
+        moveend: function() {
+            console.timeEnd("move");
+        }
+    }
+});
+
+// allow testing of specific renderers via "?renderer=Canvas", etc
+var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
+renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
+
+vectorLayer = new OpenLayers.Layer.Vector("Vector Layer", {
+    isBaseLayer: true,
+    renderers: renderer,
+    eventListeners: {
+        beforefeaturesadded: function() {
+            console.time("addFeatures");
+        },
+        featuresadded: function() {
+            console.timeEnd("addFeatures");
+        }
+    }
+});
+
+map.addLayers([vectorLayer]);
+map.addControl(new OpenLayers.Control.MousePosition());
+map.setCenter(new OpenLayers.LonLat(0, 0), 2);
+
+features = new Array(500);
+var x, y, points
+for (var i = 0; i < 500; i++) {
+    x = 90-Math.random()*180;
+    y = 45-Math.random()*90;
+    var pointList = [];
+    for(var p=0; p<19; ++p) {
+        var a = p * (2 * Math.PI) / 20;
+        var r = Math.random() * 3 + 1;
+        var newPoint = new OpenLayers.Geometry.Point(x + (r * Math.cos(a)),
+                                                     y + (r * Math.sin(a)));
+        pointList.push(newPoint);
+    }
+    pointList.push(pointList[0]);
+    features[i] = new OpenLayers.Feature.Vector(
+        new OpenLayers.Geometry.LinearRing(pointList));
+        
+}
+vectorLayer.addFeatures(features);
+
+var select = document.getElementById("renderers");
+var renderers = OpenLayers.Layer.Vector.prototype.renderers;
+var option;
+for (var i=0, len=renderers.length; i<len; i++) {
+    if (OpenLayers.Renderer[renderers[i]].prototype.supported()) {
+        option = document.createElement("option");
+        option.textContent = renderers[i];
+        option.value = renderers[i];
+        option.selected = renderers[i] == vectorLayer.renderer.CLASS_NAME.split(".").pop();
+        select.appendChild(option);
+    }
+}
+select.onchange = function() {
+    window.location.href = window.location.href.split("?")[0] +
+        "?renderer=" + select.options[select.selectedIndex].value;
+}