diff --git a/build/ludus.mjs b/build/ludus.mjs
index 345ac21..8632864 100644
--- a/build/ludus.mjs
+++ b/build/ludus.mjs
@@ -218,6 +218,10 @@ function turn_to_deg (heading) {
   return (heading % 1) * 360
 }
 
+function hex (n) {
+  return n.toString(16).padStart(2, "0")
+}
+
 function svg_render_line (prev, curr) {
   if (!prev.pendown) return ""
   if (eq_vect(prev.position, curr.position)) return ""
@@ -225,7 +229,7 @@ function svg_render_line (prev, curr) {
   const {position: [x2, y2]} = curr
   const [r, g, b, a] = resolve_color(pencolor)
   return `
-    <line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="rgb(${r} ${g} ${b})" stroke-opacity="${a/255}" stroke-width="${penwidth}"/>
+    <line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#${hex(r)}${hex(g)}${hex(b)}" stroke-linecap="square" stroke-opacity="${a/255}" stroke-width="${penwidth}"/>
     `
 }
 
@@ -269,10 +273,10 @@ function svg_render_turtle (state) {
   const [x3, y3] = rotate(origin, -turtle_angle)
   const [pr, pg, pb, pa] = resolve_color(pencolor)
   const pen_alpha = pa/255
-  const ink = pendown ? `<line x1="${x1}" y1="${y1}" x2="0" y2="0" stroke="rgb(${pr} ${pg} ${pb})" stroke-opacity="${pen_alpha}" stroke-width="${penwidth}" />` : ""
+  const ink = pendown ? `<line x1="${x1}" y1="${y1}" x2="0" y2="0" stroke="#${hex(pr)}${hex(pg)}${hex(pb)}" stroke-linecap="round" stroke-opacity="${pen_alpha}" stroke-width="${penwidth}" />` : ""
   return `
     <g transform="translate(${x}, ${y})rotate(${-turn_to_deg(heading)})">
-      <polygon points="${x1} ${y1} ${x2} ${y2} ${x3} ${y3}" stroke="none" fill="rgb(${fr} ${fg} ${fb})" fill-opacity="${fill_alpha}"/>
+      <polygon points="${x1} ${y1} ${x2} ${y2} ${x3} ${y3}" stroke="none" fill="#${hex(fr)}${hex(fg)}${hex(fb)})" fill-opacity="${fill_alpha}"/>
       ${ink}
     </g>
     `
@@ -300,15 +304,14 @@ export function svg (commands) {
   const view_width = (maxX - minX) * 1.2
   const view_height = (maxY - minY) * 1.2
   const margin = Math.max(view_width, view_height) * 0.1
-  const x1 = minX - margin
-  // don't actually need these:
-  // const y1 = minY - margin
-  // const x2 = maxX + margin
-  const y2 = maxY + margin
+  const x_origin = minX - margin
+  const y_origin = -maxY - margin
   const path = svg_render_path(states)
   const turtle = svg_render_turtle(states[states.length - 1])
   return `<?xml version="1.0" standalone="no"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color:rgb(${r} ${g} ${b}); background-opacity: ${a/255}" viewBox="${x1} ${-y2} ${view_width} ${view_height}">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="${x_origin} ${y_origin} ${view_width} ${view_height}">
+
+  <rect x="${x_origin - 5}" y="${y_origin - 5}" width="${view_width + 10}" height="${view_height + 10}" fill="#${hex(r)}${hex(g)}${hex(b)}" stroke-width="0" paint-order="fill" />
 
   <g transform="scale(-1, 1) rotate(180)">
     ${path}