diff --git a/src/FractalSVG.ts b/src/FractalSVG.ts
index d7ddf8b..431fa94 100644
--- a/src/FractalSVG.ts
+++ b/src/FractalSVG.ts
@@ -22,7 +22,7 @@
     return output;
 }
 
-export function createInwardSpiral(input:Polygon, maxiterations:number, shrinkRate:number): Polygon[]
+function createInwardSpiral(input:Polygon, maxiterations:number, shrinkRate:number): Polygon[]
 {
     const cycle:Polygon[] = [input];
     let pNext:Polygon;
@@ -37,27 +37,43 @@
     return cycle;
 }
 
-function polygonToSVG(polygon:Polygon, cssStyle:string): string
+function polygonToSvg(
+    svgRootElement:SVGSVGElement,
+    polygon:Polygon,
+    { fill }:{fill:string | null},
+): SVGPolygonElement
 {
-    const svg = [`<polygon points="`];
+    // Note: it is not possible to create any svg element without the namespace.
+    const polygonSvg = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    polygonSvg.style.fill = fill;
     for(const corner of polygon)
     {
-        svg.push(`${corner.x},${corner.y} `);
+        // This is the only way to create an SVGPoint:
+        const point = svgRootElement.createSVGPoint();
+        point.x = corner.x;
+        point.y = corner.y;
+        polygonSvg.points.appendItem(point);
     }
-    svg.push(`" style="${cssStyle}" />`);
 
-    return svg.join("");
+    return polygonSvg;
 }
 
-export function fractalToSVG(fractal:Polygon[][], sideLength:number): string
+function polygonStyle(strength:number)
 {
-    // const el = document.createElement("svg");
-    // el.setAttribute("width", sideLength.toString());
-    // el.setAttribute("height", sideLength.toString());
-    // el.setAttribute("style", "fill:none;stroke:purple;stroke-width:1");
+    return {
+        fill: `rgb(0,0,${Math.floor(strength)})`,
+    };
+}
 
-    const svg = [`<svg width="${sideLength}" height="${sideLength}"
- style="fill:none;stroke:purple;stroke-width:1">`];
+export function fractalToSvg(fractal:Polygon[][], sideLength:number): SVGSVGElement
+{
+    // Note: it is not possible to create any svg element without the namespace.
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "svg") as SVGSVGElement;
+    el.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, sideLength);
+    el.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, sideLength);
+    el.style.fill = "none";
+    el.style.stroke = "purple";
+    el.style.strokeWidth = "1";
 
     let colorStrength = 0;
     const initialColorStrength = 20;
@@ -66,17 +82,13 @@
         colorStrength = initialColorStrength;
         for(const iteration of segment)
         {
-            const polygonSvg = polygonToSVG(iteration, `fill:rgb(0,0,${Math.floor(colorStrength)})`);
-            svg.push(polygonSvg);
-            // el.append(polygonSvg);
+            const p = polygonToSvg(el, iteration, polygonStyle(colorStrength));
+            el.appendChild(p);
             colorStrength += (255-initialColorStrength)/segment.length;
         }
     }
 
-    // document.body.append(el);
-    svg.push("</svg>");
-
-    return svg.join("");
+    return el;
 }
 
 export function createSquare(side:number): Polygon

diff --git a/src/FractalSVG.ts b/src/FractalSVG.ts
index d7ddf8b..431fa94 100644
--- a/src/FractalSVG.ts
+++ b/src/FractalSVG.ts
@@ -22,7 +22,7 @@
     return output;
 }
 
-export function createInwardSpiral(input:Polygon, maxiterations:number, shrinkRate:number): Polygon[]
+function createInwardSpiral(input:Polygon, maxiterations:number, shrinkRate:number): Polygon[]
 {
     const cycle:Polygon[] = [input];
     let pNext:Polygon;
@@ -37,27 +37,43 @@
     return cycle;
 }
 
-function polygonToSVG(polygon:Polygon, cssStyle:string): string
+function polygonToSvg(
+    svgRootElement:SVGSVGElement,
+    polygon:Polygon,
+    { fill }:{fill:string | null},
+): SVGPolygonElement
 {
-    const svg = [`<polygon points="`];
+    // Note: it is not possible to create any svg element without the namespace.
+    const polygonSvg = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    polygonSvg.style.fill = fill;
     for(const corner of polygon)
     {
-        svg.push(`${corner.x},${corner.y} `);
+        // This is the only way to create an SVGPoint:
+        const point = svgRootElement.createSVGPoint();
+        point.x = corner.x;
+        point.y = corner.y;
+        polygonSvg.points.appendItem(point);
     }
-    svg.push(`" style="${cssStyle}" />`);
 
-    return svg.join("");
+    return polygonSvg;
 }
 
-export function fractalToSVG(fractal:Polygon[][], sideLength:number): string
+function polygonStyle(strength:number)
 {
-    // const el = document.createElement("svg");
-    // el.setAttribute("width", sideLength.toString());
-    // el.setAttribute("height", sideLength.toString());
-    // el.setAttribute("style", "fill:none;stroke:purple;stroke-width:1");
+    return {
+        fill: `rgb(0,0,${Math.floor(strength)})`,
+    };
+}
 
-    const svg = [`<svg width="${sideLength}" height="${sideLength}"
- style="fill:none;stroke:purple;stroke-width:1">`];
+export function fractalToSvg(fractal:Polygon[][], sideLength:number): SVGSVGElement
+{
+    // Note: it is not possible to create any svg element without the namespace.
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "svg") as SVGSVGElement;
+    el.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, sideLength);
+    el.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX, sideLength);
+    el.style.fill = "none";
+    el.style.stroke = "purple";
+    el.style.strokeWidth = "1";
 
     let colorStrength = 0;
     const initialColorStrength = 20;
@@ -66,17 +82,13 @@
         colorStrength = initialColorStrength;
         for(const iteration of segment)
         {
-            const polygonSvg = polygonToSVG(iteration, `fill:rgb(0,0,${Math.floor(colorStrength)})`);
-            svg.push(polygonSvg);
-            // el.append(polygonSvg);
+            const p = polygonToSvg(el, iteration, polygonStyle(colorStrength));
+            el.appendChild(p);
             colorStrength += (255-initialColorStrength)/segment.length;
         }
     }
 
-    // document.body.append(el);
-    svg.push("</svg>");
-
-    return svg.join("");
+    return el;
 }
 
 export function createSquare(side:number): Polygon
diff --git a/src/index.ts b/src/index.ts
index 344ff12..7468132 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-import { createSquare, inwardSpiralFractal, fractalToSVG } from "./FractalSVG";
+import { createSquare, inwardSpiralFractal, fractalToSvg } from "./FractalSVG";
 
 function pageInit(): void
 {
@@ -8,11 +8,9 @@
 
     const startShape = createSquare(sideLength);
     const fractal = inwardSpiralFractal(startShape, iterations, shrinkRate);
-    const svg = fractalToSVG(fractal, sideLength);
-
     const divSpiral = document.getElementById("spiral") as HTMLDivElement;
-    divSpiral.innerHTML = svg;
-    // document.body.append(svg);
+
+    divSpiral.appendChild(fractalToSvg(fractal, sideLength));
 }
 
 document.addEventListener("DOMContentLoaded", pageInit);