title: Fabric.js: How to turn SVG loaded from URL into grayscale?
body: <p>I'm working on a customization tool for products where users can upload their SVG files so they can be printed on products.</p>
  
  <p>Now, I need to be able to turn this imported logo in grayscale to show them how it would look if they choose the laser print type.</p>
  
  <p>I know there is a Grayscale filter which would do just that but it doesn't seem to work on my element loaded with this code (don't mind the {$var} which are from smarty) :</p>
  
  <pre><code>fabric.loadSVGFromURL(r.filepath, function(objects, options){
  
          var loadedObjects = new fabric.util.groupSVGElements(objects, options);
  
          //loadedObjects.setCoords();
  
          //loadedObjects.setCoords();
          var scaleX = canvas_{$image.id_image}.width / loadedObjects.width;
          var scaleY =  canvas_{$image.id_image}.height / loadedObjects.height;
          var scale = (scaleX &gt; scaleY) ? scaleY : scaleX;
  
          canvas_{$image.id_image}.add(loadedObjects).renderAll();
          loadedObjects.setCoords();
          loadedObjects.set({
              top: 0,
              left: 0,
              scaleX: scale,
              scaleY: scale,
              selectable: true
          });
  
          loadedSVG_{$image.id_image} = loadedObjects;
  
          canvas_{$image.id_image}.renderAll();
  
      });
  </code></pre>
  
  <p>I would like to know what is the best way to achieve this result. Should I turn my element into an <code>fabric.Image</code> ? Wouldn't that impact the resizing capabilities by destroying the vectors ?</p>
  
  <p>Is there another way ?</p>