2 files changed, 20 insertions, 5 deletions
diff --git a/src/lustre/html.gleam b/src/lustre/html.gleam
index f925d95..4c7cf8c 100644
--- a/src/lustre/html.gleam
+++ b/src/lustre/html.gleam
@@ -847,7 +847,11 @@ pub fn svg(
   attrs: List(Attribute(msg)),
   children: List(Element(msg)),
 ) -> Element(msg) {
-  element("svg", attrs, children)
+  element(
+    "svg",
+    [attribute.attribute("xmlns", "http://www.w3.org/2000/svg"), ..attrs],
+    children,
+  )
 }
 
 /// The top-level element in MathML. Every valid MathML instance must be wrapped
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);