Plot.image render SVG elements

src/marks/image.js

@@ -33,13 +33,18 @@ function isPath(string) {
 function isUrl(string) {
   return /^(blob|data|file|http|https):/i.test(string);
 }
-
 // Disambiguates a constant src definition from a channel. A path or URL string
 // is assumed to be a constant; any other string is assumed to be a field name.
 function maybePathChannel(value) {
   return typeof value === "string" && (isPath(value) || isUrl(value)) ? [undefined, value] : [value, undefined];
 }
 
+// Returns the encoded outerHTML of an svg (with the appropriate namespace)
+function getSvgString(svg) {
+  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  return `data:image/svg+xml;utf8,${svg.outerHTML}`;
+}
+
 export class Image extends Mark {
   constructor(data, options = {}) {
     let {x, y, r, width, height, rotate, src, preserveAspectRatio, crossOrigin, frameAnchor, imageRendering} = options;
@@ -98,7 +103,7 @@ export class Image extends Mark {
           // TODO: combine x, y, rotate and transform-origin into a single transform
           .attr("transform", A ? (i) => `rotate(${A[i]})` : rotate ? `rotate(${rotate})` : null)
           .attr("transform-origin", A || rotate ? template`${X ? (i) => X[i] : cx}px ${Y ? (i) => Y[i] : cy}px` : null)
-          .call(applyAttr, "href", S ? (i) => S[i] : this.src)
+          .call(applyAttr, "href", S ? (i) => (S[i] instanceof SVGAElement ? getSvgString(S[i]) : S[i]) : this.src)
           .call(applyAttr, "preserveAspectRatio", this.preserveAspectRatio)
           .call(applyAttr, "crossorigin", this.crossOrigin)
           .call(applyAttr, "image-rendering", this.imageRendering)

test/plots/image-render-svgs.ts

@@ -0,0 +1,11 @@
+import * as Plot from "@observablehq/plot";
+
+export async function imageRenderSvgs() {
+  return Plot.image([0], {
+    frameAnchor: "middle",
+    src: () => Plot.barX([1, 2, 3], {y: d => d}).plot(),
+    width: 300,
+    height: 200,
+    imageRendering: "pixelated"
+  }).plot({width: 300, height: 200});
+}

test/plots/index.ts

@@ -121,6 +121,7 @@ export * from "./high-cardinality-ordinal.js";
 export * from "./href-fill.js";
 export * from "./ibm-trading.js";
 export * from "./identity-scale.js";
+export * from "./image-render-svgs.js";
 export * from "./image-rendering.js";
 export * from "./industry-unemployment-share.js";
 export * from "./industry-unemployment-stream.js";