So I'm trying to download an svg using AJAX get request. But I'm having some errors:

The log:

Tue Sep  6 18:05:16 2016: loading AJAX request: https://test.com/svgFile
Tue Sep  6 18:05:16 2016: debug: [prefetch-1] loading https://test.com/svgFile
Tue Sep  6 18:05:17 2016: debug: [prefetch-1] loaded https://test.com/svgFile
Tue Sep  6 18:05:17 2016: debug: loaded resource: https://test.com/svgFile
Tue Sep  6 18:05:17 2016: debug: loaded resource: type: yes(resource_type("image/svg+xml", [], svg, no))
Tue Sep  6 18:05:18 2016: error: TypeError: invalid this value

In my html, this is what I'm trying to do:

<script>
              function loadCanvas(dataURL) {
                  var canvas = document.getElementById('canvas1');
                  var context = canvas.getContext('2d');

                  // load image from data url
                  var imageObj = new Image();
                  imageObj.onload = function() {
                    context.drawImage(this, 0, 0);
                  };

                  imageObj.src = dataURL;
              }
                
                // make ajax call to get image data url
                var request = new XMLHttpRequest();
                request.open('GET', 'https://test.com/svgFile', no);

                request.send();
                loadCanvas(request.responseText);
   </script>

Two problems here:
1. There is an error with the request.
2. In loadCanvas function, I'm trying to see if I can get the svg and manipulate the image(changing the color of particular elements). I can add svg element to html but it's too big and really effects the performance. Anyone tried this before?

In Prince there will not be any advantage to drawing SVG via the canvas, it would be simpler to just place the SVG as an img element in the document. What kind of changes are you trying to make to it?

Trying to make color changes for particular group in svg. The reason I'm trying with canvas is if I put the svg element it is effecting the performance.

How big is the SVG file? Can you change the color with CSS? Also it might be worth trying the Prince latest builds, which include many improvements to SVG.

Hi Ray, the problem with this code (even in the latest build) seems to be that Prince lacks support for firing load events on images. With the caveat that I'm not absolutely sure what you mean by "an error with the request". I've attempted to recreate your demo with some logging here:
http://hallvord.com/temp/prince/3467-testA.htm

The AJAX request itself works fine for me, but the code in imgObject.onload never runs. Therefore the image is not painted on the canvas.

I guess this is another todo for mikeday's roadmap

Announcement: repos for tests/utils

(While I think Prince should support onload, I guess this is also an opportunity to investigate performance issues and perhaps optimize something - so if you could share some code that makes Prince slow, it would be fun to dissect that problem..!)

Announcement: repos for tests/utils