title: SVG icons in Leaflet.js map
body: <p>I have a working Leaflet map but cannot pass in SVG icons using encodeURI (have not tried encodeURIComponent because I'm not sure that is the issue).  The <a href="https://gist.github.com/clhenrick/6791bb9040a174cd93573f85028e97af" rel="noreferrer">gist</a> I'm using shows how to pass in SVG rectangles and this works:</p>
  
  <pre><code>&lt;svg xmlns='http://www.w3.org/2000/svg'&gt; &lt;rect&gt; x='0' y='0' width='20' height='10' fill='#000000' &lt;/rect&gt; &lt;/svg&gt; 
  </code></pre>
  
  <p>However, I cannot pass in a circle or a path successfully, even though the code is valid, optimized in SVGOMG, and appearing properly on SVG linters such as SVG Viewer. For example, a star.</p>
  
  <pre><code>&lt;svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'&gt;&lt;path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z' fill='#000000'/&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>An <a href="https://codepen.io/adelaide01/pen/EXMwbY" rel="noreferrer">example is on CodePen</a> and the relevant lines of code are:</p>
  
  <pre><code>var svgicon ="&lt;svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'&gt;&lt;path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z' fill='#000000'/&gt;&lt;/svg&gt;"
  
  var url = encodeURI("data:image/svg+xml," + svgicon).replace(/%20/g, ' ').replace(/%22/g, "'").replace(/%3C/g,'&lt;').replace(/%3E/g,'&gt;');
  console.log(url);
  </code></pre>
  
  <p>You can see the SVG path in the console.</p>
  
  <pre><code>"data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'&gt;&lt;path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z' fill='#000000'/&gt;&lt;/svg&gt;"
  </code></pre>
  
  <p>Nothing shows up and there is no error message. Sometimes, a broken image link shows up.</p>