title: How to retrieve svg file name or path from itself using javascript or jQuery
body: <p>Please is there a possible way I can get the file name of an svg file directly from the file itself for example I have this folder and files</p>
  
  <pre><code>+mainFolder/       &lt;!--Main Folder--&gt;
   +svgImgs/         &lt;!--SVG image Folder--&gt;
    +image.svg       &lt;!--SVG image--&gt;
   +index.php        &lt;!--index page of Main Folder--&gt;
  </code></pre>
  
  <p>Then in my index page I have this <code>ajax()</code> call that retrieves and appends the <code>image.svg</code> file.</p>
  
  <pre><code>$.get('svgImgs/image.svg', null, function(data){
      var svgNode = $('svg', data);
      var docNode = document.adoptNode(svgNode[0]);
      $('div').append(docNode);
  }, 'xml');
  </code></pre>
  
  <p>Now the issue is that I want to trigger an <code>onclick</code> event for the <code>svg</code> files as I have multiple of them. and I want to pass the svg file name or svg path as the parameter</p>
  
  <pre><code>&lt;svg&gt;
      &lt;script&gt;
          $('svg').on('load', function(){
              fileName = //get the file name or file path
              $(this).attr('onclick', 'myFunction('+fileName+')');
          })
      &lt;/script&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>So I can run the <code>myFunction()</code> in my index file</p>
  
  <pre><code>function myFunction(svg){
      //functions here
  }
  </code></pre>
  
  <p>Please any better suggestion on how I can do this?</p>