1 files changed, 15 insertions, 4 deletions
diff --git a/src/runtime.ffi.mjs b/src/runtime.ffi.mjs
index b76a29f..babd0b8 100644
--- a/src/runtime.ffi.mjs
+++ b/src/runtime.ffi.mjs
@@ -1,9 +1,9 @@
-import { h, t } from "./lustre/element.mjs";
+import { element, text } from "./lustre/element.mjs";
 import { List } from "./gleam.mjs";
 import { Some, None } from "../gleam_stdlib/gleam/option.mjs";
 
-const Element = h("").constructor;
-const Text = t("").constructor;
+const Element = element("").constructor;
+const Text = text("").constructor;
 
 export function morph(prev, curr) {
   if (curr instanceof Element) {
@@ -31,7 +31,10 @@ export function morph(prev, curr) {
 // ELEMENTS --------------------------------------------------------------------
 
 function createElement(prev, curr) {
-  const el = document.createElement(curr[0]);
+  const el =
+    curr[0] === "svg"
+      ? document.createElementNS("http://www.w3.org/2000/svg", "svg")
+      : document.createElement(curr[0]);
 
   let attr = curr[1];
   while (attr.head) {
@@ -39,6 +42,10 @@ function createElement(prev, curr) {
     attr = attr.tail;
   }
 
+  if (curr[0] === "svg" && !el.getAttribute("xmlns")) {
+    el.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  }
+
   let child = curr[2];
   while (child.head) {
     el.appendChild(morph(null, child.head));
@@ -59,6 +66,10 @@ function morphElement(prev, curr) {
     currAttr = currAttr.tail;
   }
 
+  if (curr[0] === "svg" && !currAttrs.has("xmlns")) {
+    currAttrs.set("xmlns", "http://www.w3.org/2000/svg");
+  }
+
   for (const { name, value: prevValue } of prevAttrs) {
     if (!currAttrs.has(name)) prev.removeAttribute(name);
     const value = currAttrs.get(name);