Try using HTML markup in an SVG file

public/map4.svg

@@ -22,6 +22,21 @@
 
   <rect id="background"/>
 
+  <foreignObject width="100%" height="100%">
+    <!--
+      In the context of SVG embedded in an HTML document, the XHTML
+      namespace could be omitted, but it is mandatory in the
+      context of an SVG document
+    -->
+
+    <div style="background-color: orange" xmlns="http://www.w3.org/1999/xhtml">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
+      mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
+      imperdiet eros. Aliquam erat volutpat.
+      <img src="test.svg" width="10" height="10"/>
+    </div>
+  </foreignObject>
+
   <g class="gameboard">
     <g id="firing-arcs">
       <g id="shapes"/>
@@ -29,5 +44,6 @@
     </g>
     <g class="grid"/>
   </g>
+
   <script href="map.js" data-cols="33" data-rows="25"></script>
 </svg>

public/test.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <circle r="5" fill="purple"/>
+</svg>