title: Fabricjs: How to break an imported SVG image into separate individual PathGroups rather than one?
body: <p>Overall, I have a rectangular SVG image separated into two halves which I would like to add an image to on click, however, when I import the SVG it creates only one PathGroup rather than two- Does anybody know how I can achieve two distinct PathGroups? I believe this is the first step in achieving my overall goal.</p>
  
  <p>Here's how I'm loading the SVG:</p>
  
  <pre><code>    fabric.loadSVGFromURL('./img/rect_w_two_halves.svg', function(objects, options){    
          loadedObject = fabric.util.groupSVGElements(objects, options);
          loadedObject.set({
              left:0,
              top:0,
              scaleY:.50,
              scaleX:.50
          });
          canvas.add(loadedObject);
          canvas.renderAll();
      });     
  </code></pre>
  
  <p>Here's how the image looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/YZZSd.png" alt="enter image description here"></p>
  
  <p>Here's the SVG:</p>
  
  <pre><code>&lt;svg version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px"
   height="568px" viewBox="0 0 320 568" enable-background="new 0 0 320 568" xml:space="preserve"&gt;
  &lt;g id="Layer_2"&gt;
      &lt;line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-miterlimit="10" x1="253.978" y1="284" x2="66.022" y2="284"/&gt;
      &lt;path fill="none" stroke="#FFFFFF" stroke-width="15" stroke-miterlimit="10" d="M253.04,448.055
      c0,10.338-8.381,18.719-18.719,18.719H85.68c-10.338,0-18.72-8.381-18.72-18.719V119.945c0-10.338,8.382-18.719,18.72-18.719
      h148.642c10.338,0,18.719,8.381,18.719,18.719V448.055L253.04,448.055z"/&gt;
  &lt;/g&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>Thanks in advance as I've been really stuck on this issue.</p>