JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="500" height="400" viewBox="0 0 500 400">

  <!-- A simple floorplan map -->
  <g id="floor" fill="#ddd" stroke="black" stroke-width="3">
      <rect x="50" y="50" width="200" height="150" />
      <rect x="100" y="200" width="150" height="150" />
      <rect x="250" y="100" width="200" height="225" />
  </g>

  <!-- A group to hold the created pin refernces. Not necessary, but keeps things tidy. -->
  <g id="markers">
  </g>
</svg>

JavaScript

var  markerPositions = [[225,175], [75,75], [150,225], [400,125], [300,300]];

var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";

// Add a pin marker definition to our map file
var  svg = document.getElementById("map");
var  defs = document.createElementNS(svgNS, "defs");
var  grp = document.createElementNS(svgNS, "g");
grp.id = "pin";
var  img = document.createElementNS(svgNS, "image");
img.setAttributeNS(xlinkNS, "href", "http://www.clker.com/cliparts/b/7/6/5/1308001441853739087google%20maps%20pin.svg");
// Set the size of the pin
img.setAttribute("width", "30");
img.setAttribute("height", "30");
// Use a transform to centre the pin
img.setAttribute("transform", "translate(-15 -15)");
// Attach the image to the g
grp.appendChild(img);
// Attach the g to the defs
defs.appendChild(grp);
// Attach the defs to the map svg
svg.appendChild(defs);

for (var i=0; i<markerPositions.length; i++) {
    // Create an SVG <use> element
    var  use = document.createElementNS(svgNS, "use");
    // Point it at our pin marker (the circle)
    use.setAttributeNS(xlinkNS, "href", "#pin");
    // Set it's x and y
    use.setAttribute("x", markerPositions[i][0]);
    use.setAttribute("y", markerPositions[i][1]);
    // Add it to the "markers" group
    document.getElementById("markers").appendChild(use);
}