title: How to change svg color on Canvas - Fabricjs
body: <p>I'm creating an app with <a href="http://fabricjs.com/" rel="nofollow">Fabricjs</a>. <br>
  I have to add an SVG file to the canvas and change the color every time a <a href="http://labs.abeautifulsite.net/jquery-minicolors/" rel="nofollow">Minicolors</a> input changes. <br>
  I first made the browser display the SVG images as SVG codes like so:</p>
  
  <pre><code>$('img[src$=".svg"]').each(function(){
  var $img = $(this),
      imgURL = $img.attr('src'),
      attributes = $img.prop('attributes');
  
  $.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(data).find('svg');
    // Remove any invalid XML tags as per http://validator.w3.org
    $svg = $svg.removeAttr('xmlns:a');
    // Make sure that every attribute was copied
    $.each(attributes, function() {
      $svg.attr(this.name, this.value);
    });
    // Replace image with new SVG
    $img.replaceWith($svg);
  }, 'xml');
  });
  </code></pre>
  
  <p>Then I loaded the SVG images from the DOM to the canvas when they get clicked on, like so:</p>
  
  <pre><code>$('#images').on('click', 'svg', function() {
    var serializer = new XMLSerializer(),
    svgStr = serializer.serializeToString(this);
  
    fabric.loadSVGFromString(svgStr,function(objects, options) {
      options.id = this.id;
      var obj = fabric.util.groupSVGElements(objects, options);
  
      canvas.add(obj);
  
      obj.scaleToHeight(127) // Scales it down to some small size
         .scaleToWidth(90)
         .center() // Centers it (no s**t, Sherlock)
         .setCoords();
  
      canvas.setActiveObject(obj).renderAll();
    });
  });
  </code></pre>
  
  <p>Now for my next goal, how do I change the path color of the selected svg file?
  My main guess would be to follow these steps:</p>
  
  <ol>
  <li>Save the left and top positions of the selected SVG</li>
  <li>Change the color of the SVG image in the DOM</li>
  <li>Remove the selected SVG object</li>
  <li>Replace it with the new SVG using the new color at the saved left and top positions</li>
  </ol>
  
  <p>But I thought: "So I have to do all this every time a Minicolors input changes? Won't that be a performance issue later?"</p>
  
  <p>Is there a better approach than this? Here's a <a href="https://jsfiddle.net/pp6233zc/" rel="nofollow">JSFiddle</a> that will get you started. Thanks.</p>