title: How to show multiple external svg graphics in a html5 canvas
body: <p>I have created a html 5 canvas and added some shapes using 
  ctx.fillRect(X,Y,W,H);  and some other javascript functions.</p>
  
  <p>Now i want to add a svg graphic in multiple places of that canvas.</p>
  
  <p>The reason i want to use a svg is the sharpness &amp; quality of the image. 
  I tried using drawImage method in HTML5 but the image i want to draw is doesn't give a very quality output when it's added to the canvas using drawImage method.No matter how high resolution image i use it makes a very low quality image.</p>
  
  <p>But i think using a svg graphic is the solution.</p>
  
  <p>This is the code i used,</p>
  
  <pre><code>    &lt;canvas id="myCanvas" style="border: 2px solid #000000; width: 1280px; height: 800px;"&gt;&lt;/canvas&gt; 
  &lt;img id="location" src="location.png" alt="The Scream" width="25.5" height="41.5"&gt;
  &lt;script &gt;   
                  var c = document.getElementById("myCanvas"); 
          var ctx = c.getContext("2d"); 
  
                  ctx.fillRect(4,4, 12,10);
          ctx.fillStyle=fontBlack;        
          ctx.fillText("1",8,10);     
          ctx.fillRect(5,16, 7, 16);
          ctx.fillRect(5,33, 7, 28);
          ctx.fillRect(5,62, 7, 50);
          ctx.fillRect(5,113, 7, 15);
          ctx.fillRect(5,129, 7, 15);
  
  //I have a list of coordinates in a javascript object list called selectedShelfList, I'm getting the necessary coordinates from that.
  
  function drawLocations(){ 
  
              for (var i=0; i&lt;selectedShelfList.length; i++)
              {
  
                  var x_coordinate = selectedShelfList[i].shelf_x;
                  var y_coordinate = selectedShelfList[i].shelf_y;
  
  
                  var img=document.getElementById("location");
                  ctx.drawImage(img,x_coordinate,y_coordinate,8.5,13.8);
  
                  //Instead of drawImage method i want to use a code to show a svg graphic here
              }
          } 
  &lt;/script &gt;  
  </code></pre>
  
  <p>As solutions i found on stackoverflow for this problem,
  I tried using canvg.js as mentioned in the previous similar questions but it wasn't clear.
  for example: </p>
  
  <pre><code>var ctx = document.getElementById('test').getContext('2d');
  ctx.drawSvg('&lt;svg&gt;&lt;rect x="0" y="0" width="100" height="200" fill="red" /&gt;&lt;/svg&gt;', 0 , 0 , 500, 500);
  </code></pre>
  
  <p>How shoul i give the url for external svg in this command? 
  Can i use the url in between the '' as the parameter for drawSvg ? 
  Eg: ctx.drawSvg('location.svg', 0 , 0 , 500, 500);</p>
  
  <p>Is there any way i can show a svg graphic inside a canvas?
  Can canvg do the trick? If so how exactly? </p>
  
  <p>Please help me on this. :)</p>