mapshaper 0.5.111 → 0.5.114

package/www/mapshaper.js

@@ -1,6 +1,6 @@
 (function () {
 
-  var VERSION = "0.5.111";
+  var VERSION = "0.5.114";
 
 
   var utils = /*#__PURE__*/Object.freeze({
@@ -13607,6 +13607,224 @@
     importFurniture: importFurniture
   });
 
+  /*
+  {
+    width: size[0],
+    height: size[1],
+    bbox: bounds.toArray(),
+    type: 'frame'
+  }
+  */
+  function getFrameData(dataset, exportOpts) {
+    var frameLyr = findFrameLayerInDataset(dataset);
+    var frameData;
+    if (frameLyr) {
+      frameData = Object.assign({}, getFrameLayerData(frameLyr));
+    } else {
+      frameData = calcFrameData(dataset, exportOpts);
+    }
+    frameData.crs = getDatasetCRS(dataset);
+    return frameData;
+  }
+
+  function calcFrameData(dataset, opts) {
+    var bounds = getDatasetBounds(dataset);
+    var bounds2 = calcOutputSizeInPixels(bounds, opts);
+    return {
+      bbox: bounds.toArray(),
+      width: Math.round(bounds2.width()),
+      height: Math.round(bounds2.height()) || 1,
+      type: 'frame'
+    };
+  }
+
+  function getFrameLayerData(lyr) {
+    return lyr.data && lyr.data.getReadOnlyRecordAt(0);
+  }
+
+  // Used by mapshaper-frame and mapshaper-pixel-transform. TODO: refactor
+  function getFrameSize(bounds, opts) {
+    var aspectRatio = bounds.width() / bounds.height();
+    var height, width;
+    if (opts.pixels) {
+      width = Math.sqrt(+opts.pixels * aspectRatio);
+    } else {
+      width = +opts.width;
+    }
+    height = width / aspectRatio;
+    return [Math.round(width), Math.round(height)];
+  }
+
+
+  // @lyr dataset layer
+  function isFrameLayer(lyr) {
+    return getFurnitureLayerType(lyr) == 'frame';
+  }
+
+  function findFrameLayerInDataset(dataset) {
+    return utils.find(dataset.layers, function(lyr) {
+      return isFrameLayer(lyr);
+    });
+  }
+
+  function findFrameDataset(catalog) {
+    var target = utils.find(catalog.getLayers(), function(o) {
+      return isFrameLayer(o.layer);
+    });
+    return target ? target.dataset : null;
+  }
+
+  function findFrameLayer(catalog) {
+    var target = utils.find(catalog.getLayers(), function(o) {
+      return isFrameLayer(o.layer);
+    });
+    return target && target.layer || null;
+  }
+
+  function getFrameLayerBounds(lyr) {
+    return new Bounds(getFrameLayerData(lyr).bbox);
+  }
+
+  // @data frame data, including crs property if available
+  // Returns a single value: the ratio or
+  function getMapFrameMetersPerPixel(data) {
+    var bounds = new Bounds(data.bbox);
+    var k, toMeters, metersPerPixel;
+    if (data.crs) {
+      // TODO: handle CRS without inverse projections
+      // scale factor is the ratio of coordinate distance to true distance at a point
+      k = getScaleFactorAtXY(bounds.centerX(), bounds.centerY(), data.crs);
+      toMeters = data.crs.to_meter;
+    } else {
+      // Assuming coordinates are meters and k is 1 (not safe)
+      // A warning should be displayed when relevant furniture element is created
+      k = 1;
+      toMeters = 1;
+    }
+    metersPerPixel = bounds.width() / k * toMeters / data.width;
+    return metersPerPixel;
+  }
+
+
+  // bounds: Bounds object containing bounds of content in geographic coordinates
+  // returns Bounds object containing bounds of pixel output
+  // side effect: bounds param is modified to match the output frame
+  function calcOutputSizeInPixels(bounds, opts) {
+    var padX = 0,
+        padY = 0,
+        offX = 0,
+        offY = 0,
+        width = bounds.width(),
+        height = bounds.height(),
+        margins = parseMarginOption(opts.margin),
+        marginX = margins[0] + margins[2],
+        marginY = margins[1] + margins[3],
+        // TODO: add option to tweak alignment of content when both width and height are given
+        wx = 0.5, // how padding is distributed horizontally (0: left aligned, 0.5: centered, 1: right aligned)
+        wy = 0.5, // vertical padding distribution
+        widthPx, heightPx, size, kx, ky;
+
+    if (opts.fit_bbox) {
+      // scale + shift content to fit within a bbox
+      offX = opts.fit_bbox[0];
+      offY = opts.fit_bbox[1];
+      widthPx = opts.fit_bbox[2] - offX;
+      heightPx = opts.fit_bbox[3] - offY;
+      if (width / height > widthPx / heightPx) {
+        // data is wider than fit box...
+        // scale the data to fit widthwise
+        heightPx = 0;
+      } else {
+        widthPx = 0; // fit the data to the height
+      }
+      marginX = marginY = 0; // TODO: support margins
+
+    } else if (opts.svg_scale > 0) {
+      // alternative to using a fixed width (e.g. when generating multiple files
+      // at a consistent geographic scale)
+      widthPx = width / opts.svg_scale + marginX;
+      heightPx = 0;
+    } else if (+opts.pixels) {
+      size = getFrameSize(bounds, opts);
+      widthPx = size[0];
+      heightPx = size[1];
+    } else {
+      heightPx = opts.height || 0;
+      widthPx = opts.width || (heightPx > 0 ? 0 : 800); // 800 is default width
+    }
+
+    if (heightPx > 0) {
+      // vertical meters per pixel to fit height param
+      ky = (height || width || 1) / (heightPx - marginY);
+    }
+    if (widthPx > 0) {
+      // horizontal meters per pixel to fit width param
+      kx = (width || height || 1) / (widthPx - marginX);
+    }
+
+    if (!widthPx) { // heightPx and ky are defined, set width to match
+      kx = ky;
+      widthPx = width > 0 ? marginX + width / kx : heightPx; // export square graphic if content has 0 width (reconsider this?)
+    } else if (!heightPx) { // widthPx and kx are set, set height to match
+      ky = kx;
+      heightPx = height > 0 ? marginY + height / ky : widthPx;
+      // limit height if max_height is defined
+      if (opts.max_height > 0 && heightPx > opts.max_height) {
+        ky = kx * heightPx / opts.max_height;
+        heightPx = opts.max_height;
+      }
+    }
+
+    if (kx > ky) { // content is wide -- need to pad vertically
+      ky = kx;
+      padY = ky * (heightPx - marginY) - height;
+    } else if (ky > kx) { // content is tall -- need to pad horizontally
+      kx = ky;
+      padX = kx * (widthPx - marginX) - width;
+    }
+
+    bounds.padBounds(
+      margins[0] * kx + padX * wx,
+      margins[1] * ky + padY * wy,
+      margins[2] * kx + padX * (1 - wx),
+      margins[3] * ky + padY * (1 - wy));
+
+    if (!(widthPx > 0 && heightPx > 0)) {
+      error("Missing valid height and width parameters");
+    }
+    if (!(kx === ky && kx > 0)) {
+      error("Missing valid margin parameters");
+    }
+
+    return new Bounds(offX, offY, widthPx + offX, heightPx + offY);
+  }
+
+  function parseMarginOption(opt) {
+    var str = utils.isNumber(opt) ? String(opt) : opt || '';
+    var margins = str.trim().split(/[, ] */);
+    if (margins.length == 1) margins.push(margins[0]);
+    if (margins.length == 2) margins.push(margins[0], margins[1]);
+    if (margins.length == 3) margins.push(margins[2]);
+    return margins.map(function(str) {
+      var px = parseFloat(str);
+      return isNaN(px) ? 1 : px; // 1 is default
+    });
+  }
+
+  var FrameData = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    getFrameData: getFrameData,
+    getFrameLayerData: getFrameLayerData,
+    getFrameSize: getFrameSize,
+    findFrameLayerInDataset: findFrameLayerInDataset,
+    findFrameDataset: findFrameDataset,
+    findFrameLayer: findFrameLayer,
+    getFrameLayerBounds: getFrameLayerBounds,
+    getMapFrameMetersPerPixel: getMapFrameMetersPerPixel,
+    calcOutputSizeInPixels: calcOutputSizeInPixels,
+    parseMarginOption: parseMarginOption
+  });
+
   // Apply rotation, scale and/or shift to some or all of the features in a dataset
   //
   cmd.affine = function(targetLayers, dataset, opts) {
@@ -13744,6 +13962,14 @@
     return p.length > 2 && p[2] == 'C';
   }
 
+  function stringifyPolygonCoords(coords) {
+    var parts = [];
+    for (var i=0; i<coords.length; i++) {
+      parts.push(stringifyLineStringCoords(coords[i]) + ' Z');
+    }
+    return parts.length > 0 ? parts.join(' ') : '';
+  }
+
   function stringifyLineStringCoords(coords) {
     if (coords.length === 0) return '';
     var d = 'M';
@@ -13774,6 +14000,7 @@
 
   var SvgPathUtils = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    stringifyPolygonCoords: stringifyPolygonCoords,
     stringifyLineStringCoords: stringifyLineStringCoords
   });
 
@@ -14023,6 +14250,7 @@
   // null values indicate the lack of a function for parsing/identifying this property
   // (in which case a heuristic is used for distinguishing a string literal from an expression)
   var stylePropertyTypes = {
+    css: null,
     class: 'classname',
     dx: 'measure',
     dy: 'measure',
@@ -14041,6 +14269,7 @@
     'stroke-dasharray': 'dasharray',
     'stroke-width': 'number',
     'stroke-opacity': 'number',
+    'stroke-miterlimit': 'number',
     'fill-opacity': 'number',
     'text-anchor': null
   };
@@ -14071,16 +14300,34 @@
     effect: null // e.g. "fade"
   }, stylePropertyTypes);
 
-  var commonProperties = 'class,opacity,stroke,stroke-width,stroke-dasharray,stroke-opacity,fill-opacity'.split(',');
+  var commonProperties = 'css,class,opacity,stroke,stroke-width,stroke-dasharray,stroke-opacity,fill-opacity'.split(',');
 
   var propertiesBySymbolType = {
     polygon: utils.arrayToIndex(commonProperties.concat('fill', 'fill-pattern')),
-    polyline: utils.arrayToIndex(commonProperties.concat('stroke-linecap', 'stroke-linejoin')),
+    polyline: utils.arrayToIndex(commonProperties.concat('stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit')),
     point: utils.arrayToIndex(commonProperties.concat('fill', 'r')),
     label: utils.arrayToIndex(commonProperties.concat(
-      'fill,r,font-family,font-size,text-anchor,font-weight,font-style,letter-spacing,dominant-baseline'.split(',')))
+      'fill,font-family,font-size,text-anchor,font-weight,font-style,letter-spacing,dominant-baseline'.split(',')))
   };
 
+  // symType: point, polygon, polyline, label
+  function applyStyleAttributes(svgObj, symType, rec, filter) {
+    var fields = findPropertiesBySymbolGeom(Object.keys(rec || {}), symType);
+    for (var i=0, n=fields.length; i<n; i++) {
+      if (filter && !filter(fields[i])) continue;
+      setAttribute(svgObj, fields[i], rec[fields[i]]);
+    }
+  }
+
+  function setAttribute(obj, k, v) {
+    if (!obj.properties) obj.properties = {};
+    obj.properties[k] = v;
+    if (k == 'stroke-dasharray' && v) {
+      // kludge for cleaner dashes... make butt the default?
+      obj.properties['stroke-linecap'] = 'butt';
+    }
+  }
+
   function isSupportedSvgStyleProperty(name) {
     return name in stylePropertyTypes;
   }
@@ -14154,7 +14401,6 @@
       // treating the string as a literal value
       literalVal = strVal;
     }
-    // console.log("literalVal:", mightBeExpression(strVal, fields), strVal, fields)
     if (accessor) return accessor;
     if (literalVal !== null) return function(id) {return literalVal;};
     stop('Unexpected value for', svgName + ':', strVal);
@@ -14236,6 +14482,7 @@
 
   var SvgProperties = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    applyStyleAttributes: applyStyleAttributes,
     isSupportedSvgStyleProperty: isSupportedSvgStyleProperty,
     findPropertiesBySymbolGeom: findPropertiesBySymbolGeom,
     getSymbolDataAccessor: getSymbolDataAccessor,
@@ -14249,37 +14496,36 @@
     isSvgColor: isSvgColor
   });
 
-  var symbolRenderers = {};
-
-  function getTransform(xy, scale) {
-    var str = 'translate(' + roundToTenths(xy[0]) + ' ' + roundToTenths(xy[1]) + ')';
-    if (scale && scale != 1) {
-      str += ' scale(' + scale + ')';
-    }
-    return str;
-  }
-
-  var SvgCommon = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    symbolRenderers: symbolRenderers,
-    getTransform: getTransform
-  });
+  var geojsonImporters = {
+    Point: importPoint,
+    Polygon: importPolygon,
+    LineString: importLineString,
+    MultiPoint: importMultiPoint,
+    MultiLineString: importMultiLineString,
+    MultiPolygon: importMultiPolygon
+  };
 
   function importGeoJSONFeatures(features, opts) {
     opts = opts || {};
     return features.map(function(obj, i) {
       var geom = obj.type == 'Feature' ? obj.geometry : obj; // could be null
       var geomType = geom && geom.type;
+      var msType = GeoJSON.translateGeoJSONType(geomType);
+      var d = obj.properties || {};
       var svgObj = null;
       if (geomType && geom.coordinates) {
-        svgObj = geojsonImporters[geomType](geom.coordinates, obj.properties, opts);
+        svgObj = geojsonImporters[geomType](geom.coordinates, d);
       }
       if (!svgObj) {
         return {tag: 'g'}; // empty element
-      }
-      // TODO: fix error caused by null svgObj (caused by e.g. MultiPolygon with [] coordinates)
-      if (obj.properties) {
-        applyStyleAttributes(svgObj, geomType, obj.properties);
+      } else if (msType == 'polyline' || msType == 'polygon') {
+        applyStyleAttributes(svgObj, msType, d);
+      } else if (msType == 'point' && isSimpleCircle(d)) {
+        // kludge -- maintains bw compatibility/passes tests -- style attributes
+        // are applied to the <g> container, 'r' property is applied to circle
+        applyStyleAttributes(svgObj, msType, d, simpleCircleFilter);
+      } else {
+        // other point symbols: attributes are complicated, added downstream
       }
       if ('id' in obj) {
         if (!svgObj.properties) {
@@ -14291,34 +14537,37 @@
     });
   }
 
-  function applyStyleAttributes(svgObj, geomType, rec) {
-    var symbolType = GeoJSON.translateGeoJSONType(geomType);
-    if (symbolType == 'point' && ('label-text' in rec)) {
-      symbolType = 'label';
-    }
-    var fields = findPropertiesBySymbolGeom(Object.keys(rec), symbolType);
-    for (var i=0, n=fields.length; i<n; i++) {
-      setAttribute(svgObj, fields[i], rec[fields[i]]);
+  function importPoint(coords, rec) {
+    rec = rec || {};
+    if (isSimpleCircle(rec)) {
+      return {
+        tag: 'circle',
+        properties: {
+          cx: coords[0],
+          cy: coords[1],
+          r: rec.r
+        }
+      };
     }
+    var o = renderPoint(rec, coords);
+    if (o) o.properties.transform = getTransform(coords);
+    return o;
   }
 
-  function setAttribute(obj, k, v) {
-    if (k == 'r') {
-      // assigned by importPoint()
-    } else {
-      if (!obj.properties) obj.properties = {};
-      obj.properties[k] = v;
-      if (k == 'stroke-dasharray' && v) {
-        // kludge for cleaner dashes... make butt the default?
-        obj.properties['stroke-linecap'] = 'butt';
-      }
-    }
+  function simpleCircleFilter(k) {
+    return k != 'r';
+  }
+
+  // just a dot, no label or icon
+  function isSimpleCircle(rec) {
+    return rec && (rec.r > 0 && !rec['svg-symbol'] && !rec['label-text']);
   }
 
-  function importMultiPoint(coords, rec, layerOpts) {
+  function importMultiPoint(coords, rec) {
     var children = [], p;
     for (var i=0; i<coords.length; i++) {
-      p = importPoint(coords[i], rec, layerOpts);
+      p = importPoint(coords[i], rec);
+      if (!p) continue;
       if (p.tag == 'g' && p.children) {
         children = children.concat(p.children);
       } else {
@@ -14328,18 +14577,6 @@
     return children.length > 0 ? {tag: 'g', children: children} : null;
   }
 
-  function importMultiPath(coords, importer) {
-    var o;
-    for (var i=0; i<coords.length; i++) {
-      if (i === 0) {
-        o = importer(coords[i]);
-      } else {
-        o.properties.d += ' ' + importer(coords[i]).properties.d;
-      }
-    }
-    return o;
-  }
-
   function importLineString(coords) {
     var d = stringifyLineStringCoords(coords);
     return {
@@ -14348,7 +14585,6 @@
     };
   }
 
-
   function importMultiLineString(coords) {
     var d = coords.map(stringifyLineStringCoords).join(' ');
     return {
@@ -14357,20 +14593,55 @@
     };
   }
 
-  // Kludge for applying fill and other styles to a <text> element
-  // (for rendering labels in the GUI with the dot in Canvas, not SVG)
-  function importStyledLabel(rec, p) {
-    var o = importLabel(rec, p);
-    applyStyleAttributes(o, 'Point', rec);
+  function importMultiPolygon(coords) {
+   return importPolygon(flattenMultiPolygonCoords(coords));
+  }
+
+  function flattenMultiPolygonCoords(coords) {
+    return coords.reduce(function(memo, poly) {
+      return memo.concat(poly);
+    }, []);
+  }
+
+  function importPolygon(coords) {
+    if (coords.length === 0) return null;
+    var o = {
+      tag: 'path',
+      properties: {
+        d: stringifyPolygonCoords(coords)
+      }
+    };
+    if (coords.length > 1) {
+      o.properties['fill-rule'] = 'evenodd'; // support polygons with holes
+    }
     return o;
   }
 
+  var GeojsonToSvg = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    importGeoJSONFeatures: importGeoJSONFeatures,
+    importPoint: importPoint,
+    importLineString: importLineString,
+    importMultiLineString: importMultiLineString,
+    importMultiPolygon: importMultiPolygon,
+    flattenMultiPolygonCoords: flattenMultiPolygonCoords,
+    importPolygon: importPolygon
+  });
+
   function toLabelString(val) {
     if (val || val === 0 || val === false) return String(val);
     return '';
   }
 
-  function importLabel(rec, p) {
+  // Kludge for applying fill and other styles to a <text> element
+  // (for rendering labels in the GUI with the dot in Canvas, not SVG)
+  function renderStyledLabel(rec) {
+    var o = renderLabel(rec);
+    applyStyleAttributes(o, 'label', rec);
+    return o;
+  }
+
+  function renderLabel(rec) {
     var line = toLabelString(rec['label-text']);
     var morelines, obj;
     // Accepting \n (two chars) as an alternative to the newline character
@@ -14385,9 +14656,6 @@
       y: dy,
       x: dx
     };
-    if (p) {
-      properties.transform = getTransform(p);
-    }
     if (newline.test(line)) {
       morelines = line.split(newline);
       line = morelines.shift();
@@ -14415,406 +14683,378 @@
     return obj;
   }
 
-  function getEmptySymbol() {
-    return {tag: 'g', properties: {}, children: []};
-  }
+  var SvgLabels = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    renderStyledLabel: renderStyledLabel,
+    renderLabel: renderLabel
+  });
 
+  // convert data records (properties like svg-symbol, label-text, fill, r) to svg symbols
 
-  function renderSymbol(d, x, y) {
-    var renderer = symbolRenderers[d.type];
-     if (!renderer) {
-      stop(d.type ? 'Unknown symbol type: ' + d.type : 'Symbol is missing a type property');
-    }
-    return renderer(d, x || 0, y || 0);
-  }
-
-  // d: svg-symbol object from feature data object
-  function importSymbol(d, xy) {
-    var renderer;
-    if (!d) {
-      return getEmptySymbol();
-    }
-    if (utils.isString(d)) {
-      d = JSON.parse(d);
+  function getTransform(xy, scale) {
+    var str = 'translate(' + roundToTenths(xy[0]) + ' ' + roundToTenths(xy[1]) + ')';
+    if (scale && scale != 1) {
+      str += ' scale(' + scale + ')';
     }
-    return {
-      tag: 'g',
-      properties: {
-        'class': 'mapshaper-svg-symbol',
-        transform: xy ? getTransform(xy) : null
-      },
-      children: renderSymbol(d)
-    };
+    return str;
   }
 
-  function importPoint(coords, rec, layerOpts) {
-    rec = rec || {};
-    if ('svg-symbol' in rec) {
-      return importSymbol(rec['svg-symbol'], coords);
-    }
-    return importStandardPoint(coords, rec, layerOpts || {});
-  }
+  var symbolRenderers = {
+    line: line,
+    polygon: polygon,
+    polyline: polyline,
+    circle: circle,
+    square: square,
+    image: image,
+    group: group,
+    label: label,
+    offset: offset
+  };
 
-  function importPolygon(coords) {
-    var d, o;
-    for (var i=0; i<coords.length; i++) {
-      d = o ? o.properties.d + ' ' : '';
-      o = importLineString(coords[i]);
-      o.properties.d = d + o.properties.d + ' Z';
+  // render label and/or point symbol
+  function renderPoint(rec) {
+    var children = [];
+    // var halfSize = rec.r || 0; // radius or half of symbol size
+    if (featureHasSvgSymbol(rec)) {
+      children.push(renderSymbol(rec));
     }
-    if (coords.length > 1) {
-      o.properties['fill-rule'] = 'evenodd'; // support polygons with holes
+    if (featureHasLabel(rec)) {
+      children.push(renderStyledLabel(rec));
     }
+    var o = children.length > 1 ? {tag: 'g', children: children} : children[0];
+    if (!o) return null;
+    o.properties = o.properties || {};
     return o;
   }
 
-  function importStandardPoint(coords, rec, layerOpts) {
-    var isLabel = 'label-text' in rec;
-    var symbolType = layerOpts.point_symbol || '';
-    var children = [];
-    var halfSize = rec.r || 0; // radius or half of symbol size
-    var p;
-    // if not a label, create a symbol even without a size
-    // (circle radius can be set via CSS)
-    if (halfSize > 0 || !isLabel) {
-      if (symbolType == 'square') {
-        p = {
-          tag: 'rect',
-          properties: {
-            x: coords[0] - halfSize,
-            y: coords[1] - halfSize,
-            width: halfSize * 2,
-            height: halfSize * 2
-          }};
-      } else { // default is circle
-        p = {
-          tag: 'circle',
-          properties: {
-            cx: coords[0],
-            cy: coords[1]
-          }};
-        if (halfSize > 0) {
-          p.properties.r = halfSize;
-        }
-      }
-      children.push(p);
+  function renderSymbol(d) {
+    if (d['svg-symbol']) {
+      return renderComplexSymbol(d['svg-symbol']);
     }
-    if (isLabel) {
-      children.push(importLabel(rec, coords));
+    if (d.r > 0) {
+      return circle(d);
     }
-    return children.length > 1 ? {tag: 'g', children: children} : children[0];
+    return empty();
   }
 
-  var geojsonImporters = {
-    Point: importPoint,
-    Polygon: importPolygon,
-    LineString: importLineString,
-    MultiPoint: function(coords, rec, opts) {
-      return importMultiPoint(coords, rec, opts);
-    },
-    MultiLineString: function(coords) {
-      return importMultiPath(coords, importLineString);
-    },
-    MultiPolygon: function(coords) {
-      return importMultiPath(coords, importPolygon);
-    }
-  };
-
-  var GeojsonToSvg = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    importGeoJSONFeatures: importGeoJSONFeatures,
-    applyStyleAttributes: applyStyleAttributes,
-    importLineString: importLineString,
-    importMultiLineString: importMultiLineString,
-    importStyledLabel: importStyledLabel,
-    importLabel: importLabel,
-    renderSymbol: renderSymbol,
-    importSymbol: importSymbol,
-    importPoint: importPoint,
-    importPolygon: importPolygon
-  });
-
-  /* require mapshaper-rectangle, mapshaper-furniture */
-
-  cmd.frame = function(catalog, source, opts) {
-    var size, bounds, tmp, dataset;
-    if (+opts.width > 0 === false && +opts.pixels > 0 === false) {
-      stop("Missing a width or area");
+  function renderComplexSymbol(sym, x, y) {
+    if (utils.isString(sym)) {
+      sym = JSON.parse(sym);
     }
-    if (opts.width && opts.height) {
-      opts = utils.extend({}, opts);
-      // Height is a string containing either a number or a
-      //   comma-sep. pair of numbers (range); here we convert height to
-      //   an aspect-ratio parameter for the rectangle() function
-      opts.aspect_ratio = getAspectRatioArg(opts.width, opts.height);
-      // TODO: currently returns max,min aspect ratio, should return in min,max order
-      // (rectangle() function should handle max,min argument correctly now anyway)
+    if (sym.tag) {
+      // symbol appears to already use mapshaper's svg notation... pass through
+      return sym;
     }
-    tmp = cmd.rectangle(source, opts);
-    bounds = getDatasetBounds(tmp);
-    if (probablyDecimalDegreeBounds(bounds)) {
-      stop('Frames require projected, not geographical coordinates');
-    } else if (!getDatasetCRS(tmp)) {
-      message('Warning: missing projection data. Assuming coordinates are meters and k (scale factor) is 1');
-    }
-    size = getFrameSize(bounds, opts);
-    if (size[0] > 0 === false) {
-      stop('Missing a valid frame width');
+    var renderer = symbolRenderers[sym.type];
+    if (!renderer) {
+      message(sym.type ? 'Unknown symbol type: ' + sym.type : 'Symbol is missing a type property');
+      return empty();
     }
-    if (size[1] > 0 === false) {
-      stop('Missing a valid frame height');
+    var o = renderer(sym, x || 0, y || 0);
+    if (sym.opacity) {
+      o.properties.opacity = sym.opacity;
     }
-    dataset = {info: {}, layers:[{
-      name: opts.name || 'frame',
-      data: new DataTable([{
-        width: size[0],
-        height: size[1],
-        bbox: bounds.toArray(),
-        type: 'frame'
-      }])
-    }]};
-    catalog.addDataset(dataset);
-  };
+    return o;
+  }
 
-  // Convert width and height args to aspect ratio arg for the rectangle() function
-  function getAspectRatioArg(widthArg, heightArg) {
-    // heightArg is a string containing either a number or a
-    // comma-sep. pair of numbers (range);
-    return heightArg.split(',').map(function(opt) {
-      var height = Number(opt),
-          width = Number(widthArg);
-      if (!opt) return '';
-      return width / height;
-    }).reverse().join(',');
+  function empty() {
+    return {tag: 'g', properties: {}, children: []};
   }
 
-  function getFrameSize(bounds, opts) {
-    var aspectRatio = bounds.width() / bounds.height();
-    var height, width;
-    if (opts.pixels) {
-      width = Math.sqrt(+opts.pixels * aspectRatio);
-    } else {
-      width = +opts.width;
-    }
-    height = width / aspectRatio;
-    return [Math.round(width), Math.round(height)];
+  function circle(d, x, y) {
+    var o = {
+      tag: 'circle',
+      properties: {
+        cx: x || 0,
+        cy: y || 0
+      }
+    };
+    applyStyleAttributes(o, 'point', d);
+    return o;
   }
 
-  function getDatasetDisplayBounds(dataset) {
-    var frameLyr = findFrameLayerInDataset(dataset);
-    if (frameLyr) {
-      // TODO: check for coordinate issues (non-intersection with other layers, etc)
-      return getFrameLayerBounds(frameLyr);
+  function label(d, x, y) {
+    var o = renderStyledLabel(d);
+    if (x || y) {
+      // set x, y here, rather than adding to dx, dy -- so dy, dy can
+      // have CSS units (like ems)
+      o.properties.transform = getTransform([x, y]);
     }
-    return getDatasetBounds(dataset);
+    return o;
   }
 
-  // @lyr dataset layer
-  function isFrameLayer(lyr) {
-    return getFurnitureLayerType(lyr) == 'frame';
+  function image(d, x, y) {
+    var w = d.width || 20,
+        h = d.height || 20;
+    var o = {
+      tag: 'image',
+      properties: {
+        width: w,
+        height: h,
+        x: (x || 0) - w / 2,
+        y: (y || 0) - h / 2,
+        href: d.href || ''
+      }
+    };
+    return o;
   }
 
-  function findFrameLayerInDataset(dataset) {
-    return utils.find(dataset.layers, function(lyr) {
-      return isFrameLayer(lyr);
-    });
+  function square(d, x, y) {
+    var r = d.r || 0;
+    var o = {
+      tag: 'rect',
+      properties: {
+        x: x - r,
+        y: y - r,
+        width: r * 2,
+        height: r * 2
+      }
+    };
+    applyStyleAttributes(o, 'point', d);
+    return o;
   }
 
-  function findFrameDataset(catalog) {
-    var target = utils.find(catalog.getLayers(), function(o) {
-      return isFrameLayer(o.layer);
-    });
-    return target ? target.dataset : null;
+  function line(d, x, y) {
+    var coords, o;
+    coords = [[x, y], [x + (d.dx || 0), y + (d.dy || 0)]];
+    o = importLineString(coords);
+    applyStyleAttributes(o, 'polyline', d);
+    return o;
   }
 
-  function findFrameLayer(catalog) {
-    var target = utils.find(catalog.getLayers(), function(o) {
-      return isFrameLayer(o.layer);
-    });
-    return target && target.layer || null;
+  // polyline coords are like GeoJSON MultiLineString coords: an array of 0 or more paths
+  function polyline(d, x, y) {
+    var coords = d.coordinates || [];
+    var o = importMultiLineString(coords);
+    applyStyleAttributes(o, 'polyline', d);
+    return o;
   }
 
-  function getFrameLayerBounds(lyr) {
-    return new Bounds(getFurnitureLayerData(lyr).bbox);
+  // polygon coords are an array of rings (and holes), like flattened MultiPolygon coords
+  function polygon(d, x, y) {
+    var coords = d.coordinates || [];
+    var o = importPolygon(coords);
+    applyStyleAttributes(o, 'polygon', d);
+    return o;
   }
 
-
-  // @data frame data, including crs property if available
-  // Returns a single value: the ratio or
-  function getMapFrameMetersPerPixel(data) {
-    var bounds = new Bounds(data.bbox);
-    var k, toMeters, metersPerPixel;
-    if (data.crs) {
-      // TODO: handle CRS without inverse projections
-      // scale factor is the ratio of coordinate distance to true distance at a point
-      k = getScaleFactorAtXY(bounds.centerX(), bounds.centerY(), data.crs);
-      toMeters = data.crs.to_meter;
-    } else {
-      // Assuming coordinates are meters and k is 1 (not safe)
-      // A warning should be displayed when relevant furniture element is created
-      k = 1;
-      toMeters = 1;
-    }
-    metersPerPixel = bounds.width() / k * toMeters / data.width;
-    return metersPerPixel;
+  function offset(d, x, y) {
+    var dx = (x || 0) + (d.dx || 0);
+    var dy = (y || 0) + (d.dy || 0);
+    return {
+      tag: 'g',
+      properties: {
+        transform: getTransform([dx, dy])
+      },
+      children: []
+    };
   }
 
-  furnitureRenderers.frame = function(d) {
-    var lineWidth = 1,
-        // inset stroke by half of line width
-        off = lineWidth / 2,
-        obj = importPolygon([[[off, off], [off, d.height - off],
-          [d.width - off, d.height - off],
-          [d.width - off, off], [off, off]]]);
-    utils.extend(obj.properties, {
-        fill: 'none',
-        stroke: d.stroke || 'black',
-        'stroke-width': d['stroke-width'] || lineWidth
+  function group(d, x, y) {
+    var o = {
+      tag: 'g',
+      children: []
+    };
+    var children = o.children;
+    (d.parts || []).forEach(function(o) {
+      var sym = renderComplexSymbol(o, x, y);
+      children.push(sym);
+      //if (d.chained) {
+      //if (o.chained) {
+      if (o.type == 'line') {
+        x += (o.dx || 0);
+        y += (o.dy || 0);
+      }
+      if (o.type == 'offset') {
+        children = sym.children;
+        x = y = 0;
+      }
     });
-    return [obj];
-  };
+    if (o.children.length == 1 && !o.properties) return o.children[0];
+    return o;
+  }
 
-  var Frame = /*#__PURE__*/Object.freeze({
+  var SvgSymbols = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    getAspectRatioArg: getAspectRatioArg,
-    getFrameSize: getFrameSize,
-    findFrameLayerInDataset: findFrameLayerInDataset,
-    findFrameDataset: findFrameDataset,
-    findFrameLayer: findFrameLayer,
-    getFrameLayerBounds: getFrameLayerBounds,
-    getMapFrameMetersPerPixel: getMapFrameMetersPerPixel
+    getTransform: getTransform,
+    symbolRenderers: symbolRenderers,
+    renderPoint: renderPoint
   });
 
-  function transformDatasetToPixels(dataset, opts) {
-    var frameLyr = findFrameLayerInDataset(dataset);
-    var bounds, bounds2, fwd, frameData;
-    if (frameLyr) {
-      // TODO: handle options like width, height margin when a frame is present
-      // TODO: check that aspect ratios match
-      frameData = getFurnitureLayerData(frameLyr);
-      bounds = new Bounds(frameData.bbox);
-      bounds2 = new Bounds(0, 0, frameData.width, frameData.height);
-    } else {
-      bounds = getDatasetBounds(dataset);
-      bounds2 = calcOutputSizeInPixels(bounds, opts);
+  cmd.scalebar = function(catalog, opts) {
+    var frame = findFrameDataset(catalog);
+    var obj, lyr;
+    if (!frame) {
+      stop('Missing a map frame');
     }
-    fwd = bounds.getTransform(bounds2, opts.invert_y);
-    transformPoints(dataset, function(x, y) {
-      return fwd.transform(x, y);
-    });
-    return [Math.round(bounds2.width()), Math.round(bounds2.height()) || 1];
+    lyr = getScalebarLayer(opts);
+    frame.layers.push(lyr);
+  };
+
+  function getScalebarLayer(opts) {
+    var obj = utils.defaults({type: 'scalebar'}, opts);
+    return {
+      name: opts.name || 'scalebar',
+      data: new DataTable([obj])
+    };
   }
 
-  function parseMarginOption(opt) {
-    var str = utils.isNumber(opt) ? String(opt) : opt || '';
-    var margins = str.trim().split(/[, ] */);
-    if (margins.length == 1) margins.push(margins[0]);
-    if (margins.length == 2) margins.push(margins[0], margins[1]);
-    if (margins.length == 3) margins.push(margins[2]);
-    return margins.map(function(str) {
-      var px = parseFloat(str);
-      return isNaN(px) ? 1 : px; // 1 is default
-    });
+  // TODO: generalize to other kinds of furniture as they are developed
+  function getScalebarPosition(d) {
+    var opts = { // defaults
+      valign: 'top',
+      halign: 'left',
+      voffs: 10,
+      hoffs: 10
+    };
+    if (+d.left > 0) {
+      opts.hoffs = +d.left;
+    }
+    if (+d.top > 0) {
+      opts.voffs = +d.top;
+    }
+    if (+d.right > 0) {
+      opts.hoffs = +d.right;
+      opts.halign = 'right';
+    }
+    if (+d.bottom > 0) {
+      opts.voffs = +d.bottom;
+      opts.valign = 'bottom';
+    }
+    return opts;
   }
 
-  // bounds: Bounds object containing bounds of content in geographic coordinates
-  // returns Bounds object containing bounds of pixel output
-  // side effect: bounds param is modified to match the output frame
-  function calcOutputSizeInPixels(bounds, opts) {
-    var padX = 0,
-        padY = 0,
-        offX = 0,
-        offY = 0,
-        width = bounds.width(),
-        height = bounds.height(),
-        margins = parseMarginOption(opts.margin),
-        marginX = margins[0] + margins[2],
-        marginY = margins[1] + margins[3],
-        // TODO: add option to tweak alignment of content when both width and height are given
-        wx = 0.5, // how padding is distributed horizontally (0: left aligned, 0.5: centered, 1: right aligned)
-        wy = 0.5, // vertical padding distribution
-        widthPx, heightPx, size, kx, ky;
+  furnitureRenderers.scalebar = renderScalebar;
 
-    if (opts.fit_bbox) {
-      // scale + shift content to fit within a bbox
-      offX = opts.fit_bbox[0];
-      offY = opts.fit_bbox[1];
-      widthPx = opts.fit_bbox[2] - offX;
-      heightPx = opts.fit_bbox[3] - offY;
-      if (width / height > widthPx / heightPx) {
-        // data is wider than fit box...
-        // scale the data to fit widthwise
-        heightPx = 0;
-      } else {
-        widthPx = 0; // fit the data to the height
-      }
-      marginX = marginY = 0; // TODO: support margins
+  function renderScalebar(d, frame) {
+    var pos = getScalebarPosition(d);
+    var metersPerPx = getMapFrameMetersPerPixel(frame);
+    var label = d.label_text || getAutoScalebarLabel(frame.width, metersPerPx);
+    var scalebarKm = parseScalebarLabelToKm(label);
+    var barHeight = 3;
+    var labelOffs = 4;
+    var fontSize = +d.font_size || 12;
+    var width = Math.round(scalebarKm / metersPerPx * 1000);
+    var height = Math.round(barHeight + labelOffs + fontSize * 0.8);
+    var labelPos = d.label_position == 'top' ? 'top' : 'bottom';
+    var anchorX = pos.halign == 'left' ? 0 : width;
+    var anchorY = barHeight + labelOffs;
+    var dx = pos.halign == 'right' ? frame.width - width - pos.hoffs : pos.hoffs;
+    var dy = pos.valign == 'bottom' ? frame.height - height - pos.voffs : pos.voffs;
 
-    } else if (opts.svg_scale > 0) {
-      // alternative to using a fixed width (e.g. when generating multiple files
-      // at a consistent geographic scale)
-      widthPx = width / opts.svg_scale + marginX;
-      heightPx = 0;
-    } else if (+opts.pixels) {
-      size = getFrameSize(bounds, opts);
-      widthPx = size[0];
-      heightPx = size[1];
-    } else {
-      heightPx = opts.height || 0;
-      widthPx = opts.width || (heightPx > 0 ? 0 : 800); // 800 is default width
+    if (labelPos == 'top') {
+      anchorY = -labelOffs;
+      dy += Math.round(labelOffs + fontSize * 0.8);
     }
 
-    if (heightPx > 0) {
-      // vertical meters per pixel to fit height param
-      ky = (height || width || 1) / (heightPx - marginY);
-    }
-    if (widthPx > 0) {
-      // horizontal meters per pixel to fit width param
-      kx = (width || height || 1) / (widthPx - marginX);
+    if (width > 0 === false) {
+      stop("Null scalebar length");
     }
+    var barObj = {
+      tag: 'rect',
+      properties: {
+        fill: 'black',
+        x: 0,
+        y: 0,
+        width: width,
+        height: barHeight
+      }
+    };
+    var labelOpts = {
+        'label-text': label,
+        'font-size': fontSize,
+        'text-anchor': pos.halign == 'left' ? 'start': 'end',
+        'dominant-baseline': labelPos == 'top' ? 'auto' : 'hanging'
+        //// 'dominant-baseline': labelPos == 'top' ? 'text-after-edge' : 'text-before-edge'
+        // 'text-after-edge' is buggy in Safari and unsupported by Illustrator,
+        // so I'm using 'hanging' and 'auto', which seem to be well supported.
+        // downside: requires a kludgy multiplier to calculate scalebar height (see above)
+      };
+    var labelObj = symbolRenderers.label(labelOpts, anchorX, anchorY);
+    var g = {
+      tag: 'g',
+      children: [barObj, labelObj],
+      properties: {
+        transform: 'translate(' + dx + ' ' + dy + ')'
+      }
+    };
+    return [g];
+  }
 
-    if (!widthPx) { // heightPx and ky are defined, set width to match
-      kx = ky;
-      widthPx = width > 0 ? marginX + width / kx : heightPx; // export square graphic if content has 0 width (reconsider this?)
-    } else if (!heightPx) { // widthPx and kx are set, set height to match
-      ky = kx;
-      heightPx = height > 0 ? marginY + height / ky : widthPx;
-      // limit height if max_height is defined
-      if (opts.max_height > 0 && heightPx > opts.max_height) {
-        ky = kx * heightPx / opts.max_height;
-        heightPx = opts.max_height;
+  function getAutoScalebarLabel(mapWidth, metersPerPx) {
+    var minWidth = 75; // 100; // TODO: vary min size based on map width
+    var minKm = metersPerPx * minWidth / 1000;
+    var options = ('1/8 1/5 1/4 1/2 1 1.5 2 3 4 5 8 10 12 15 20 25 30 40 50 75 ' +
+      '100 150 200 250 300 350 400 500 750 1,000 1,200 1,500 2,000 ' +
+      '2,500 3,000 4,000 5,000').split(' ');
+    return options.reduce(function(memo, str) {
+      if (memo) return memo;
+      var label = formatDistanceLabelAsMiles(str);
+      if (parseScalebarLabelToKm(label) > minKm) {
+         return label;
       }
-    }
+    }, null) || '';
+  }
 
-    if (kx > ky) { // content is wide -- need to pad vertically
-      ky = kx;
-      padY = ky * (heightPx - marginY) - height;
-    } else if (ky > kx) { // content is tall -- need to pad horizontally
-      kx = ky;
-      padX = kx * (widthPx - marginX) - width;
-    }
+  function formatDistanceLabelAsMiles(str) {
+    var num = parseScalebarNumber(str);
+    return str + (num > 1 ? ' MILES' : ' MILE');
+  }
 
-    bounds.padBounds(
-      margins[0] * kx + padX * wx,
-      margins[1] * ky + padY * wy,
-      margins[2] * kx + padX * (1 - wx),
-      margins[3] * ky + padY * (1 - wy));
+  // See test/mapshaper-scalebar.js for examples of supported formats
+  function parseScalebarLabelToKm(str) {
+    var units = parseScalebarUnits(str);
+    var value = parseScalebarNumber(str);
+    if (!units || !value) return NaN;
+    return units == 'mile' ? value * 1.60934 : value;
+  }
 
-    if (!(widthPx > 0 && heightPx > 0)) {
-      error("Missing valid height and width parameters");
-    }
-    if (!(kx === ky && kx > 0)) {
-      error("Missing valid margin parameters");
+  function parseScalebarUnits(str) {
+    var isMiles = /miles?$/.test(str.toLowerCase());
+    var isKm = /(km|kilometers?|kilometres?)$/.test(str.toLowerCase());
+    return isMiles && 'mile' || isKm && 'km' || '';
+  }
+
+  function parseScalebarNumber(str) {
+    var fractionRxp = /^([0-9]+) ?\/ ?([0-9]+)/;
+    var match, value;
+    str = str.replace(/[\s]/g, '').replace(/,/g, '');
+    if (fractionRxp.test(str)) {
+      match = fractionRxp.exec(str);
+      value = +match[1] / +match[2];
+    } else {
+      value = parseFloat(str);
     }
+    return value > 0 && value < Infinity ? value : NaN;
+  }
 
-    return new Bounds(offX, offY, widthPx + offX, heightPx + offY);
+  var Scalebar = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    getScalebarLayer: getScalebarLayer,
+    renderScalebar: renderScalebar,
+    formatDistanceLabelAsMiles: formatDistanceLabelAsMiles,
+    parseScalebarLabelToKm: parseScalebarLabelToKm
+  });
+
+  function transformDatasetToPixels(dataset, opts) {
+    var frame = getFrameData(dataset, opts);
+    fitDatasetToFrame(dataset, frame, opts);
+    return [frame.width, frame.height];
+  }
+
+  function fitDatasetToFrame(dataset, frame, opts) {
+    var bounds = new Bounds(frame.bbox);
+    var bounds2 = new Bounds(0, 0, frame.width, frame.height);
+    var fwd = bounds.getTransform(bounds2, opts.invert_y);
+    transformPoints(dataset, function(x, y) {
+      return fwd.transform(x, y);
+    });
   }
 
   var PixelTransform = /*#__PURE__*/Object.freeze({
     __proto__: null,
     transformDatasetToPixels: transformDatasetToPixels,
-    parseMarginOption: parseMarginOption,
-    calcOutputSizeInPixels: calcOutputSizeInPixels
+    fitDatasetToFrame: fitDatasetToFrame
   });
 
   function stringify(obj) {
@@ -14871,6 +15111,9 @@
       if (key == 'href') {
         key = 'xlink:href';
       }
+      if (key == 'css') {
+        key = 'style'; // inline style
+      }
       return memo + ' ' + key + '="' + stringEscape(strval) + '"';
     }, '');
   }
@@ -14989,6 +15232,7 @@
     return svg;
   }
 
+  // href: A URL or a local path
   // TODO: download SVG files asynchronously
   // (currently, files are downloaded synchronously, which is obviously undesirable)
   //
@@ -14996,7 +15240,7 @@
     var content;
     if (href.indexOf('http') === 0) {
       content = fetchFileSync(href);
-    } else if (require('fs').existsSync(href)) { // assume href is a relative path
+    } else if (require('fs').existsSync(href)) {
       content = require('fs').readFileSync(href, 'utf8');
     } else {
       stop("Invalid SVG location:", href);
@@ -15037,12 +15281,11 @@
   }
   */
 
-  //
   //
   function exportSVG(dataset, opts) {
     var namespace = 'xmlns="http://www.w3.org/2000/svg"';
     var defs = [];
-    var size, svg;
+    var frame, svg, layers;
     var style = '';
 
     // kludge for map keys
@@ -15059,62 +15302,70 @@
     } else {
       dataset = copyDataset(dataset); // Modify a copy of the dataset
     }
+
     // invert_y setting for screen coordinates and geojson polygon generation
     utils.extend(opts, {invert_y: true});
-    size = transformCoordsForSVG(dataset, opts);
+    frame = getFrameData(dataset, opts);
+    fitDatasetToFrame(dataset, frame, opts);
+    setCoordinatePrecision(dataset, opts.precision || 0.0001);
 
     // error if one or more svg_data fields are not present in any layers
     if (opts.svg_data) validateSvgDataFields(dataset.layers, opts.svg_data);
 
-    svg = dataset.layers.map(function(lyr) {
-      var obj = exportLayerForSVG(lyr, dataset, opts);
+    layers = dataset.layers;
+    if (opts.scalebar) {
+      layers.push(getScalebarLayer({})); // default options
+    }
+    svg = layers.map(function(lyr) {
+      var obj;
+      if (layerHasFurniture(lyr)) {
+        obj = exportFurnitureForSVG(lyr, frame, opts);
+      } else {
+        obj = exportLayerForSVG(lyr, dataset, opts);
+      }
       convertPropertiesToDefinitions(obj, defs);
       return stringify(obj);
     }).join('\n');
+
     if (defs.length > 0) {
       svg = '<defs>\n' + utils.pluck(defs, 'svg').join('') + '</defs>\n' + svg;
     }
+
     if (svg.includes('xlink:')) {
       namespace += ' xmlns:xlink="http://www.w3.org/1999/xlink"';
     }
+
+    // default line style properties
     var capStyle = opts.default_linecap || 'round';
+    var lineProps = `stroke-linecap="${capStyle}" stroke-linejoin="round"`;
+    if (svg.includes('stroke-linejoin="miter"')) {
+      // the default limit in Illustrator seems to be 10 -- too large for mapping
+      // (Mapbox uses 2 as the default in their styles)
+      lineProps += ' stroke-miterlimit="2"';
+    }
     var template = `<?xml version="1.0"?>
-<svg ${namespace} version="1.2" baseProfile="tiny" width="%d" height="%d" viewBox="%s %s %s %s" stroke-linecap="${capStyle}" stroke-linejoin="round">${style}
+<svg ${namespace} version="1.2" baseProfile="tiny" width="%d" height="%d" viewBox="%s %s %s %s" ${lineProps}>${style}
 ${svg}
 </svg>`;
-    svg = utils.format(template,size[0], size[1], 0, 0, size[0], size[1]);
+    svg = utils.format(template, frame.width, frame.height, 0, 0, frame.width, frame.height);
     return [{
       content: svg,
       filename: opts.file || getOutputFileBase(dataset) + '.svg'
     }];
   }
 
-  function transformCoordsForSVG(dataset, opts) {
-    var size = transformDatasetToPixels(dataset, opts);
-    var precision = opts.precision || 0.0001;
-    setCoordinatePrecision(dataset, precision);
-    return size;
+  function exportFurnitureForSVG(lyr, frame, opts) {
+    var layerObj = getEmptyLayerForSVG(lyr, opts);
+    layerObj.children = importFurniture(getFurnitureLayerData(lyr), frame);
+    return layerObj;
   }
 
   function exportLayerForSVG(lyr, dataset, opts) {
     var layerObj = getEmptyLayerForSVG(lyr, opts);
-    if (layerHasFurniture(lyr)) {
-      layerObj.children = exportFurnitureForSVG(lyr, dataset, opts);
-    } else {
-      layerObj.children = exportSymbolsForSVG(lyr, dataset, opts);
-    }
+    layerObj.children = exportSymbolsForSVG(lyr, dataset, opts);
     return layerObj;
   }
 
-  function exportFurnitureForSVG(lyr, dataset, opts) {
-    var frameLyr = findFrameLayerInDataset(dataset);
-    var frameData;
-    if (!frameLyr) return [];
-    frameData = getFurnitureLayerData(frameLyr);
-    frameData.crs = getDatasetCRS(dataset); // required by e.g. scalebar
-    return importFurniture(getFurnitureLayerData(lyr), frameData);
-  }
-
   function exportSymbolsForSVG(lyr, dataset, opts) {
     // TODO: convert geojson features one at a time
     var d = utils.defaults({layers: [lyr]}, dataset);
@@ -15245,6 +15496,15 @@ ${svg}
     return layerObj;
   }
 
+  function featureHasSvgSymbol(d) {
+    return !!(d && (d['svg-symbol'] || d.r));
+  }
+
+  function featureHasLabel(d) {
+    var text = d && d['label-text'];
+    return text || text === 0; // accept numerical 0 as label text
+  }
+
   function layerHasSvgSymbols(lyr) {
     return lyr.geometry_type == 'point' && lyr.data && lyr.data.fieldExists('svg-symbol');
   }
@@ -15260,10 +15520,13 @@ ${svg}
   var Svg = /*#__PURE__*/Object.freeze({
     __proto__: null,
     exportSVG: exportSVG,
+    exportFurnitureForSVG: exportFurnitureForSVG,
     exportLayerForSVG: exportLayerForSVG,
     validateSvgDataFields: validateSvgDataFields,
     exportDataAttributesForSVG: exportDataAttributesForSVG,
     getEmptyLayerForSVG: getEmptyLayerForSVG,
+    featureHasSvgSymbol: featureHasSvgSymbol,
+    featureHasLabel: featureHasLabel,
     layerHasSvgSymbols: layerHasSvgSymbols,
     layerHasLabels: layerHasLabels
   });
@@ -19153,6 +19416,10 @@ ${svg}
       .option('id-prefix', {
         describe: '[SVG] prefix for namespacing layer and feature ids'
       })
+      .option('scalebar', {
+        type: 'flag',
+        // describe: '[SVG] add a scalebar showing scale at the center of the map'
+      })
       .option('delimiter', {
         describe: '[CSV] field delimiter'
       })
@@ -20346,14 +20613,21 @@ ${svg}
       .option('stroke', {})
       .option('stroke-width', {})
       .option('fill', {
-        describe: 'symbol fill color'
+        describe: 'symbol fill color (filled symbols only)'
       })
-      .option('polygons', {
-        describe: 'generate symbols as polygons instead of SVG objects',
+      .option('stroke', {
+        describe: 'symbol line color (linear symbols only)'
+      })
+      .option('stroke-width', {
+        describe: 'symbol line width (linear symbols only)'
+      })
+      .option('geographic', {
+        old_alias: 'polygons',
+         describe: 'make geographic shapes instead of SVG objects',
         type: 'flag'
       })
       .option('pixel-scale', {
-        describe: 'set symbol scale in meters-per-pixel (for polygons option)',
+        describe: 'set symbol scale in meters per pixel (geographic option)',
         type: 'number',
       })
       // .option('flipped', {
@@ -20390,6 +20664,9 @@ ${svg}
       .option('radii', {
         describe: '(ring) comma-sep. list of concentric radii, ascending order'
       })
+      .option('arrow-style', {
+        describe: '(arrow) options: stick, standard (default is standard)'
+      })
       .option('length', {
         old_alias: 'arrow-length',
         describe: '(arrow) length of arrow in pixels'
@@ -32393,6 +32670,80 @@ ${svg}
     return parsed[0];
   }
 
+  /* require mapshaper-rectangle, mapshaper-furniture */
+
+  cmd.frame = function(catalog, source, opts) {
+    var size, bounds, tmp, dataset;
+    if (+opts.width > 0 === false && +opts.pixels > 0 === false) {
+      stop("Missing a width or area");
+    }
+    if (opts.width && opts.height) {
+      opts = utils.extend({}, opts);
+      // Height is a string containing either a number or a
+      //   comma-sep. pair of numbers (range); here we convert height to
+      //   an aspect-ratio parameter for the rectangle() function
+      opts.aspect_ratio = getAspectRatioArg(opts.width, opts.height);
+      // TODO: currently returns max,min aspect ratio, should return in min,max order
+      // (rectangle() function should handle max,min argument correctly now anyway)
+    }
+    tmp = cmd.rectangle(source, opts);
+    bounds = getDatasetBounds(tmp);
+    if (probablyDecimalDegreeBounds(bounds)) {
+      stop('Frames require projected, not geographical coordinates');
+    } else if (!getDatasetCRS(tmp)) {
+      message('Warning: missing projection data. Assuming coordinates are meters and k (scale factor) is 1');
+    }
+    size = getFrameSize(bounds, opts);
+    if (size[0] > 0 === false) {
+      stop('Missing a valid frame width');
+    }
+    if (size[1] > 0 === false) {
+      stop('Missing a valid frame height');
+    }
+    dataset = {info: {}, layers:[{
+      name: opts.name || 'frame',
+      data: new DataTable([{
+        width: size[0],
+        height: size[1],
+        bbox: bounds.toArray(),
+        type: 'frame'
+      }])
+    }]};
+    catalog.addDataset(dataset);
+  };
+
+  // Convert width and height args to aspect ratio arg for the rectangle() function
+  function getAspectRatioArg(widthArg, heightArg) {
+    // heightArg is a string containing either a number or a
+    // comma-sep. pair of numbers (range);
+    return heightArg.split(',').map(function(opt) {
+      var height = Number(opt),
+          width = Number(widthArg);
+      if (!opt) return '';
+      return width / height;
+    }).reverse().join(',');
+  }
+
+  furnitureRenderers.frame = function(d) {
+    var lineWidth = 1,
+        // inset stroke by half of line width
+        off = lineWidth / 2,
+        obj = importPolygon([[[off, off], [off, d.height - off],
+          [d.width - off, d.height - off],
+          [d.width - off, off], [off, off]]]);
+    utils.extend(obj.properties, {
+        fill: 'none',
+        stroke: d.stroke || 'black',
+        'stroke-width': d['stroke-width'] || lineWidth
+    });
+    return [obj];
+  };
+
+  var Frame = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    getAspectRatioArg: getAspectRatioArg
+  });
+
   cmd.filterGeom = function(lyr, arcs, opts) {
     if (!layerHasGeometry(lyr)) {
       stop("Layer is missing geometry");
@@ -37280,219 +37631,6 @@ ${svg}
     }
   };
 
-  symbolRenderers.circle = function(d, x, y) {
-    var o = importPoint([x, y], d, {});
-    applyStyleAttributes(o, 'Point', d);
-    return [o];
-  };
-
-  symbolRenderers.label = function(d, x, y) {
-    var o = importStyledLabel(d, [x, y]);
-    return [o];
-  };
-
-  symbolRenderers.image = function(d, x, y) {
-    var w = d.width || 20,
-        h = d.height || 20;
-    var o = {
-      tag: 'image',
-      properties: {
-        width: w,
-        height: h,
-        x: x - w / 2,
-        y: y - h / 2,
-        href: d.href || ''
-      }
-    };
-    return [o];
-  };
-
-  symbolRenderers.square = function(d, x, y) {
-    var o = importPoint([x, y], d, {point_symbol: 'square'});
-    applyStyleAttributes(o, 'Point', d);
-    return [o];
-  };
-
-  symbolRenderers.line = function(d, x, y) {
-    var coords, o;
-    coords = [[x, y], [x + (d.dx || 0), y + (d.dy || 0)]];
-    o = importLineString(coords);
-    applyStyleAttributes(o, 'LineString', d);
-    return [o];
-  };
-
-  symbolRenderers.polyline = function(d, x, y) {
-    var coords = d.coordinates || [];
-    var o = importMultiLineString(coords);
-    applyStyleAttributes(o, 'LineString', d);
-    return [o];
-  };
-
-  symbolRenderers.polygon = function(d, x, y) {
-    var coords = d.coordinates || [];
-    var o = importPolygon(coords);
-    applyStyleAttributes(o, 'Polygon', d);
-    return [o];
-  };
-
-  symbolRenderers.group = function(d, x, y) {
-    return (d.parts || []).reduce(function(memo, o) {
-      var sym = renderSymbol(o, x, y);
-      if (d.chained) {
-        x += (o.dx || 0);
-        y += (o.dy || 0);
-      }
-      return memo.concat(sym);
-    }, []);
-  };
-
-  cmd.scalebar = function(catalog, opts) {
-    var frame = findFrameDataset(catalog);
-    var obj, lyr;
-    if (!frame) {
-      stop('Missing a map frame');
-    }
-    obj = utils.defaults({type: 'scalebar'}, opts);
-    lyr = {
-      name: opts.name || 'scalebar',
-      data: new DataTable([obj])
-    };
-    frame.layers.push(lyr);
-  };
-
-  // TODO: generalize to other kinds of furniture as they are developed
-  function getScalebarPosition(d) {
-    var opts = { // defaults
-      valign: 'top',
-      halign: 'left',
-      voffs: 10,
-      hoffs: 10
-    };
-    if (+d.left > 0) {
-      opts.hoffs = +d.left;
-    }
-    if (+d.top > 0) {
-      opts.voffs = +d.top;
-    }
-    if (+d.right > 0) {
-      opts.hoffs = +d.right;
-      opts.halign = 'right';
-    }
-    if (+d.bottom > 0) {
-      opts.voffs = +d.bottom;
-      opts.valign = 'bottom';
-    }
-    return opts;
-  }
-
-  furnitureRenderers.scalebar = function(d, frame) {
-    var pos = getScalebarPosition(d);
-    var metersPerPx = getMapFrameMetersPerPixel(frame);
-    var label = d.label_text || getAutoScalebarLabel(frame.width, metersPerPx);
-    var scalebarKm = parseScalebarLabelToKm(label);
-    var barHeight = 3;
-    var labelOffs = 4;
-    var fontSize = +d.font_size || 13;
-    var width = Math.round(scalebarKm / metersPerPx * 1000);
-    var height = Math.round(barHeight + labelOffs + fontSize * 0.8);
-    var labelPos = d.label_position == 'top' ? 'top' : 'bottom';
-    var anchorX = pos.halign == 'left' ? 0 : width;
-    var anchorY = barHeight + labelOffs;
-    var dx = pos.halign == 'right' ? frame.width - width - pos.hoffs : pos.hoffs;
-    var dy = pos.valign == 'bottom' ? frame.height - height - pos.voffs : pos.voffs;
-
-    if (labelPos == 'top') {
-      anchorY = -labelOffs;
-      dy += Math.round(labelOffs + fontSize * 0.8);
-    }
-
-    if (width > 0 === false) {
-      stop("Null scalebar length");
-    }
-    var barObj = {
-      tag: 'rect',
-      properties: {
-        fill: 'black',
-        x: 0,
-        y: 0,
-        width: width,
-        height: barHeight
-      }
-    };
-    var labelOpts = {
-        'label-text': label,
-        'font-size': fontSize,
-        'text-anchor': pos.halign == 'left' ? 'start': 'end',
-        'dominant-baseline': labelPos == 'top' ? 'auto' : 'hanging'
-        //// 'dominant-baseline': labelPos == 'top' ? 'text-after-edge' : 'text-before-edge'
-        // 'text-after-edge' is buggy in Safari and unsupported by Illustrator,
-        // so I'm using 'hanging' and 'auto', which seem to be well supported.
-        // downside: requires a kludgy multiplier to calculate scalebar height (see above)
-      };
-    var labelObj = symbolRenderers.label(labelOpts, anchorX, anchorY)[0];
-    var g = {
-      tag: 'g',
-      children: [barObj, labelObj],
-      properties: {
-        transform: 'translate(' + dx + ' ' + dy + ')'
-      }
-    };
-    return [g];
-  };
-
-  function getAutoScalebarLabel(mapWidth, metersPerPx) {
-    var minWidth = 100; // TODO: vary min size based on map width
-    var minKm = metersPerPx * minWidth / 1000;
-    var options = ('1/8 1/5 1/4 1/2 1 1.5 2 3 4 5 8 10 12 15 20 25 30 40 50 75 ' +
-      '100 150 200 250 300 350 400 500 750 1,000 1,200 1,500 2,000 ' +
-      '2,500 3,000 4,000 5,000').split(' ');
-    return options.reduce(function(memo, str) {
-      if (memo) return memo;
-      var label = formatDistanceLabelAsMiles(str);
-      if (parseScalebarLabelToKm(label) > minKm) {
-         return label;
-      }
-    }, null) || '';
-  }
-
-  function formatDistanceLabelAsMiles(str) {
-    var num = parseScalebarNumber(str);
-    return str + (num > 1 ? ' MILES' : ' MILE');
-  }
-
-  // See test/mapshaper-scalebar.js for examples of supported formats
-  function parseScalebarLabelToKm(str) {
-    var units = parseScalebarUnits(str);
-    var value = parseScalebarNumber(str);
-    if (!units || !value) return NaN;
-    return units == 'mile' ? value * 1.60934 : value;
-  }
-
-  function parseScalebarUnits(str) {
-    var isMiles = /miles?$/.test(str.toLowerCase());
-    var isKm = /(km|kilometers?|kilometres?)$/.test(str.toLowerCase());
-    return isMiles && 'mile' || isKm && 'km' || '';
-  }
-
-  function parseScalebarNumber(str) {
-    var fractionRxp = /^([0-9]+) ?\/ ?([0-9]+)/;
-    var match, value;
-    str = str.replace(/[\s]/g, '').replace(/,/g, '');
-    if (fractionRxp.test(str)) {
-      match = fractionRxp.exec(str);
-      value = +match[1] / +match[2];
-    } else {
-      value = parseFloat(str);
-    }
-    return value > 0 && value < Infinity ? value : NaN;
-  }
-
-  var Scalebar = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    formatDistanceLabelAsMiles: formatDistanceLabelAsMiles,
-    parseScalebarLabelToKm: parseScalebarLabelToKm
-  });
-
   cmd.shape = function(targetDataset, opts) {
     var geojson, dataset;
     if (opts.coordinates) {
@@ -38680,6 +38818,19 @@ ${svg}
 
   var roundCoord = getRoundingFunction(0.01);
 
+  function getSymbolFillColor(d) {
+    return d.fill || 'magenta';
+  }
+
+  function getSymbolStrokeColor(d) {
+    return d.stroke || d.fill || 'magenta';
+  }
+
+  function getSymbolRadius(d) {
+    if (d.radius === 0 || d.length === 0 || d.r === 0) return 0;
+    return d.radius || d.length || d.r || 5; // use a default value
+  }
+
   function forEachSymbolCoord(coords, cb) {
     var isPoint = coords && utils.isNumber(coords[0]);
     var isNested = !isPoint && coords && Array.isArray(coords[0]);
@@ -38748,57 +38899,104 @@ ${svg}
     points.push(p2);
   }
 
-  // export function getStickArrowCoords(d, totalLen) {
-  //   var minStemRatio = getMinStemRatio(d);
-  //   var headAngle = d['arrow-head-angle'] || 90;
-  //   var curve = d['arrow-stem-curve'] || 0;
-  //   var unscaledHeadWidth = d['arrow-head-width'] || 9;
-  //   var unscaledHeadLen = getHeadLength(unscaledHeadWidth, headAngle);
-  //   var scale = getScale(totalLen, unscaledHeadLen, minStemRatio);
-  //   var headWidth = unscaledHeadWidth * scale;
-  //   var headLen = unscaledHeadLen * scale;
-  //   var tip = getStickArrowTip(totalLen, curve);
-  //   var stem = [[0, 0], tip.concat()];
-  //   if (curve) {
-  //     addBezierArcControlPoints(stem, curve);
-  //   }
-  //   if (!headLen) return [stem];
-  //   var head = [addPoints([-headWidth / 2, -headLen], tip), tip.concat(), addPoints([headWidth / 2, -headLen], tip)];
+  function getStickArrowCoords(d) {
+    return getArrowCoords(d, 'stick');
+  }
 
-  //   rotateCoords(stem, d.rotation);
-  //   rotateCoords(head, d.rotation);
-  //   return [stem, head];
-  // }
+  function getFilledArrowCoords(d) {
+    return getArrowCoords(d, 'standard');
+  }
 
-  // function getStickArrowTip(totalLen, curve) {
-  //   // curve/2 intersects the arrowhead at 90deg (trigonometry)
-  //   var theta = Math.abs(curve/2) / 180 * Math.PI;
-  //   var dx = totalLen * Math.sin(theta) * (curve > 0 ? -1 : 1);
-  //   var dy = totalLen * Math.cos(theta);
-  //   return [dx, dy];
-  // }
+  function getArrowCoords(d, style) {
+    var stickArrow = style == 'stick',
+        // direction = d.rotation || d.direction || 0,
+        direction = d.direction || 0, // rotation is an independent parameter
+        stemTaper = d['stem-taper'] || 0,
+        curvature = d['stem-curve'] || 0,
+        size = calcArrowSize(d, stickArrow);
+    if (!size) return null;
+    var stemLen = size.stemLen,
+        headLen = size.headLen,
+        headDx = size.headWidth / 2,
+        stemDx = size.stemWidth / 2,
+        baseDx = stemDx * (1 - stemTaper),
+        head, stem, coords, dx, dy;
 
-  // function addPoints(a, b) {
-  //   return [a[0] + b[0], a[1] + b[1]];
-  // }
+    if (curvature) {
+      // make curved stem
+      if (direction > 0) curvature = -curvature;
+      var theta = Math.abs(curvature) / 180 * Math.PI;
+      var sign = curvature > 0 ? 1 : -1;
+      var ax = baseDx * Math.cos(theta); // rotate arrow base
+      var ay = baseDx * Math.sin(theta) * -sign;
+      dx = stemLen * Math.sin(theta / 2) * sign;
+      dy = stemLen * Math.cos(theta / 2);
+
+      if (stickArrow) {
+        stem = getCurvedStemCoords(-ax, -ay, dx, dy, theta);
+      } else {
+        var leftStem = getCurvedStemCoords(-ax, -ay, -stemDx + dx, dy, theta);
+        var rightStem = getCurvedStemCoords(ax, ay, stemDx + dx, dy, theta);
+        stem = leftStem.concat(rightStem.reverse());
+      }
+
+    } else {
+      // make straight stem
+      dx = 0;
+      dy = stemLen;
+      if (stickArrow) {
+        stem = [[0, 0], [0, stemLen]];
+      } else {
+        stem = [[-baseDx, 0], [baseDx, 0]];
+      }
+    }
+
+    if (stickArrow) {
+      // make stick arrow
+      head = [[-headDx + dx, stemLen - headLen], [dx, stemLen], [headDx + dx, stemLen - headLen]];
+      coords = [stem, head]; // MultiLineString coords
+    } else {
+      // make filled arrow
+      // coordinates go counter clockwise, starting from the leftmost head coordinate
+      head = [[stemDx + dx, dy], [headDx + dx, dy],
+          [dx, headLen + dy], [-headDx + dx, dy], [-stemDx + dx, dy]];
+      coords = stem.concat(head);
+      coords.push(stem[0].concat()); // closed path
+      coords = [coords]; // Polygon coords
+    }
+
+    if (d.anchor == 'end') {
+      scaleAndShiftCoords(coords, 1, [-dx, -dy - headLen]);
+    } else if (d.anchor == 'middle') {
+      // shift midpoint away from the head a bit for a more balanced placement
+      // scaleAndShiftCoords(coords, 1, [-dx/2, (-dy - headLen)/2]);
+      scaleAndShiftCoords(coords, 1, [-dx * 0.5, -dy * 0.5 - headLen * 0.25]);
+    }
+
+    rotateCoords(coords, direction);
+    if (d.flipped) {
+      flipY(coords);
+    }
+    return coords;
+  }
 
   function calcStraightArrowCoords(stemLen, headLen, stemDx, headDx, baseDx) {
     return [[baseDx, 0], [stemDx, stemLen], [headDx, stemLen], [0, stemLen + headLen],
           [-headDx, stemLen], [-stemDx, stemLen], [-baseDx, 0], [baseDx, 0]];
   }
 
-  function calcArrowSize(d) {
+  function calcArrowSize(d, stickArrow) {
     // don't display arrows with negative length
     var totalLen = Math.max(d.radius || d.length || d.r || 0, 0),
         scale = 1,
         o = initArrowSize(d); // calc several parameters
 
-    if (totalLen > 0) {
+    if (totalLen >= 0) {
       scale = calcScale(totalLen, o.headLen, d);
       o.stemWidth *= scale;
       o.headWidth *= scale;
       o.headLen *= scale;
-      o.stemLen = totalLen - o.headLen;
+      o.stemLen = stickArrow ? totalLen : totalLen - o.headLen;
     }
 
     if (o.headWidth < o.stemWidth) {
@@ -38819,7 +39017,7 @@ ${svg}
     } else if (stemLen + headLen > totalLen) {
       scale = totalLen / (stemLen + headLen);
     }
-    return scale;
+    return scale || 0;
   }
 
   function initArrowSize(d) {
@@ -38849,56 +39047,6 @@ ${svg}
     return 1 / Math.tan(Math.PI * headAngle / 180 / 2) / 2;
   }
 
-  function getFilledArrowCoords(d) {
-    var direction = d.rotation || d.direction || 0,
-        stemTaper = d['stem-taper'] || 0,
-        curvature = d['stem-curve'] || 0,
-        size = calcArrowSize(d);
-    if (!size) return null;
-    var stemLen = size.stemLen,
-        headLen = size.headLen,
-        headDx = size.headWidth / 2,
-        stemDx = size.stemWidth / 2,
-        baseDx = stemDx * (1 - stemTaper),
-        head, stem, coords, dx, dy;
-
-    if (curvature) {
-      if (direction > 0) curvature = -curvature;
-      var theta = Math.abs(curvature) / 180 * Math.PI;
-      var sign = curvature > 0 ? 1 : -1;
-      var ax = baseDx * Math.cos(theta); // rotate arrow base
-      var ay = baseDx * Math.sin(theta) * -sign;
-      dx = stemLen * Math.sin(theta / 2) * sign;
-      dy = stemLen * Math.cos(theta / 2);
-      var leftStem = getCurvedStemCoords(-ax, -ay, -stemDx + dx, dy, theta);
-      var rightStem = getCurvedStemCoords(ax, ay, stemDx + dx, dy, theta);
-      stem = leftStem.concat(rightStem.reverse());
-
-    } else {
-      dx = 0;
-      dy = stemLen;
-      stem = [[-baseDx, 0], [baseDx, 0], [baseDx, 0]];
-    }
-
-    // coordinates go counter clockwise, starting from the leftmost head coordinate
-    head = [[stemDx + dx, dy], [headDx + dx, dy],
-        [dx, headLen + dy], [-headDx + dx, dy], [-stemDx + dx, dy]];
-
-    coords = stem.concat(head);
-    if (d.anchor == 'end') {
-      scaleAndShiftCoords(coords, 1, [-dx, -dy - headLen]);
-    } else if (d.anchor == 'middle') {
-      // shift midpoint away from the head a bit for a more balanced placement
-      // scaleAndShiftCoords(coords, 1, [-dx/2, (-dy - headLen)/2]);
-      scaleAndShiftCoords(coords, 1, [-dx * 0.5, -dy * 0.5 - headLen * 0.25]);
-    }
-
-    rotateCoords(coords, direction);
-    if (d.flipped) {
-      flipY(coords);
-    }
-    return [coords];
-  }
 
   // ax, ay: point on the base
   // bx, by: point on the stem
@@ -38934,8 +39082,19 @@ ${svg}
     return coords;
   }
 
+  function makeCircleSymbol(d, opts) {
+    var radius = getSymbolRadius(d);
+    // TODO: remove duplication with svg-symbols.js
+    if (+opts.scale) radius *= +opts.scale;
+    return {
+      type: 'circle',
+      fill: getSymbolFillColor(d),
+      r: radius
+    };
+  }
+
   function getPolygonCoords(d) {
-    var radius = d.radius || d.length || d.r,
+    var radius = getSymbolRadius(d),
         sides = +d.sides || getSidesByType(d.type),
         rotated = sides % 2 == 1,
         coords = [],
@@ -38972,7 +39131,7 @@ ${svg}
   }
 
   function getStarCoords(d) {
-    var radius = d.radius || d.length || d.r,
+    var radius = getSymbolRadius(d),
         points = d.points || d.sides && d.sides / 2 || 5,
         sides = points * 2,
         minorRadius = getMinorRadius(points) * radius,
@@ -39017,6 +39176,35 @@ ${svg}
     return 180 - centerAngle;
   }
 
+  // Returns a svg-symbol object
+  function makeRingSymbol(d, opts) {
+    var scale = +opts.scale || 1;
+    var radii = parseRings(d.radii || '2').map(function(r) { return r * scale; });
+    var solidCenter = utils.isOdd(radii.length);
+    var color = getSymbolFillColor(d);
+    var parts = [];
+    if (solidCenter) {
+      parts.push({
+        type: 'circle',
+        fill: color,
+        r: radii.shift()
+      });
+    }
+    for (var i=0; i<radii.length; i+= 2) {
+      parts.push({
+        type: 'circle',
+        fill: 'none', // TODO remove default black fill so this is not needed
+        stroke: color,
+        'stroke-width':  roundToTenths(radii[i+1] - radii[i]),
+        r: roundToTenths(radii[i+1] * 0.5 + radii[i] * 0.5)
+      });
+    }
+    return {
+      type: 'group',
+      parts: parts
+    };
+  }
+
   // Returns GeoJSON MultiPolygon coords
   function getRingCoords(d) {
     var radii = parseRings(d.radii || '2');
@@ -39048,13 +39236,36 @@ ${svg}
     return utils.uniq(arr);
   }
 
+  // Returns an svg-symbol data object for one symbol
+  function makePathSymbol(coords, properties, geojsonType) {
+    var sym;
+    if (geojsonType == 'MultiPolygon' || geojsonType == 'Polygon') {
+      sym = {
+        type: 'polygon',
+        fill: getSymbolFillColor(properties),
+        coordinates: geojsonType == 'Polygon' ? coords : flattenMultiPolygonCoords(coords)
+      };
+    } else if (geojsonType == 'LineString' || geojsonType == 'MultiLineString') {
+      sym = {
+        type: 'polyline',
+        stroke: getSymbolStrokeColor(properties),
+        'stroke-width': properties['stroke-width'] || 2,
+        coordinates: geojsonType == 'LineString' ? [coords] : coords
+      };
+    } else {
+      error('Unsupported type:', geojsonType);
+    }
+    roundCoordsForSVG(sym.coordinates);
+    return sym;
+  }
+
   // TODO: refactor to remove duplication in mapshaper-svg-style.js
   cmd.symbols = function(inputLyr, dataset, opts) {
     requireSinglePointLayer(inputLyr);
     var lyr = opts.no_replace ? copyLayer(inputLyr) : inputLyr;
-    var polygonMode = !!opts.polygons;
+    var shapeMode = !!opts.geographic;
     var metersPerPx;
-    if (polygonMode) {
+    if (shapeMode) {
       requireProjectedDataset(dataset);
       metersPerPx = opts.pixel_scale || getMetersPerPixel(lyr, dataset);
     }
@@ -39064,9 +39275,24 @@ ${svg}
       if (!shp) return null;
       var d = getSymbolData(i);
       var rec = records[i] || {};
+
+      // non-polygon symbols
+      if (!shapeMode && d.type == 'circle') {
+        rec['svg-symbol'] = makeCircleSymbol(d, opts);
+        return;
+      }
+      if (!shapeMode && d.type == 'ring') {
+        rec['svg-symbol'] = makeRingSymbol(d, opts);
+        return;
+      }
+
       var geojsonType = 'Polygon';
       var coords;
-      if (d.type == 'arrow') {
+      // these symbols get converted to polygon shapes
+      if (d.type == 'arrow' && opts.arrow_style == 'stick') {
+        coords = getStickArrowCoords(d);
+        geojsonType = 'MultiLineString';
+      } else if (d.type == 'arrow') {
         coords = getFilledArrowCoords(d);
       } else if (d.type == 'ring') {
         coords = getRingCoords(d);
@@ -39078,23 +39304,24 @@ ${svg}
       }
       if (!coords) return null;
       rotateCoords(coords, +d.rotation || 0);
-      if (!polygonMode) {
+      if (!shapeMode) {
         flipY(coords);
       }
       if (+opts.scale) {
         scaleAndShiftCoords(coords, +opts.scale, [0, 0]);
       }
-      if (polygonMode) {
+      if (shapeMode) {
         scaleAndShiftCoords(coords, metersPerPx, shp[0]);
-        if (d.tfill) rec.fill = d.fill;
+        if (d.fill) rec.fill = d.fill;
+        if (d.stroke) rec.stroke = d.stroke;
         return createGeometry(coords, geojsonType);
       } else {
-        rec['svg-symbol'] = makeSvgPolygonSymbol(coords, d, geojsonType);
+        rec['svg-symbol'] = makePathSymbol(coords, d, geojsonType);
       }
     });
 
     var outputLyr, dataset2;
-    if (polygonMode) {
+    if (shapeMode) {
       dataset2 = importGeometries(geometries, records);
       outputLyr = mergeOutputLayerIntoDataset(inputLyr, dataset, dataset2, opts);
       outputLyr.data = lyr.data;
@@ -39128,31 +39355,10 @@ ${svg}
   }
 
   function getMetersPerPixel(lyr, dataset) {
-
-    // TODO: handle single point, no extent
     var bounds = getLayerBounds(lyr);
-    return bounds.width() / 800;
-  }
-
-  // Returns an svg-symbol data object for one symbol
-  function makeSvgPolygonSymbol(coords, properties, geojsonType) {
-    if (geojsonType == 'MultiPolygon') {
-      coords = convertMultiPolygonCoords(coords);
-    } else if (geojsonType != 'Polygon') {
-      error('Unsupported type:', geojsonType);
-    }
-    roundCoordsForSVG(coords);
-    return {
-      type: 'polygon',
-      coordinates: coords,
-      fill: properties.fill || 'magenta'
-    };
-  }
-
-  function convertMultiPolygonCoords(coords) {
-    return coords.reduce(function(memo, poly) {
-      return memo.concat(poly);
-    }, []);
+    // TODO: need a better way to handle a single point with no extent
+    var extent = bounds.width() || bounds.height() || 1000;
+    return extent / 800;
   }
 
   var Symbols = /*#__PURE__*/Object.freeze({
@@ -40661,7 +40867,8 @@ ${svg}
   //       export only functions called by the GUI.
 
   var internal = {};
-  internal.svg = Object.assign({}, SvgCommon, SvgStringify, SvgPathUtils, GeojsonToSvg);
+
+  internal.svg = Object.assign({}, SvgStringify, SvgPathUtils, GeojsonToSvg, SvgLabels, SvgSymbols);
 
   // Assign functions and objects exported from modules to the 'internal' namespace
   // to maintain compatibility with tests and to expose (some of) them to the GUI.
@@ -40725,6 +40932,7 @@ ${svg}
     FileTypes,
     FilterGeom,
     Frame,
+    FrameData,
     Furniture,
     Geodesic,
     GeojsonExport,