[Solved]-Custom SVG Symbol for location for highcharts-Highcharts

#map {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 10px;
  border: thin solid black;
}

.point {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAzMCI+CiAgPGRlZnM+CiAgICA8bWFzayBpZD0ibTEiPgogICAgICA8cGF0aCBkPSJNIDIwLDEwIEMgMjAsMTUgMTAsMzAgMTAsMzAgMTAsMzAgMCwxNSAwLDEwIDAsNSA1LDAgMTAsMCAxNSwwIDIwLDUgMjAsMTAgWiIgZmlsbD0id2hpdGUiIC8+CiAgICAgIDxsaW5lIHgxPSIxMCIgeTE9IjUiIHgyPSIxMCIgeTI9IjE1IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlPSJibGFjayIvPgogICAgICA8bGluZSB4MT0iNSIgeTE9IjEwIiB4Mj0iMTUiIHkyPSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZT0iYmxhY2siLz4KICAgIDwvbWFzaz4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjMwIiBmaWxsPSJncmF5IiBtYXNrPSJ1cmwoI20xKSIvPgo8L3N2Zz4=');
  background-repeat: no-repeat;
  position: absolute;
  width: 20px;
  height: 30px;
}

<p>The basic icon:</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 30" width="100" height="150">
  <defs>
    <mask id="m1">
      <path d="M 20,10 C 20,15 10,30 10,30 10,30 0,15 0,10 0,5 5,0 10,0 15,0 20,5 20,10 Z" fill="white" />
      <line x1="10" y1="5" x2="10" y2="15" stroke-width="2.5" stroke="black"/>
      <line x1="5" y1="10" x2="15" y2="10" stroke-width="2.5" stroke="black"/>
    </mask>
  </defs>
  <rect width="20" height="30" fill="gray" mask="url(#m1)"/>
</svg>
<p>A "map":</p>
<div id="map">
  <span class="point" style="left:100px;top:50px"></span>
  <span class="point" style="left:200px;top:100px"></span>
</div>