Skip to content
Advertisement

Load SVG into canvas to get base64 dataurl

I have this SVG in my html :

JavaScript

the symbol pointed by the “use” tag is :

JavaScript

This display correctly when the page load (ie. it is using the symbol that I refer to using use tag).

I want to take this SVG and get the base64 dataurl (convert it to an image).

I tried to use this code without success, it always gets me a white/blank image.

JavaScript

The base64 I get in the console looks like this :

JavaScript

I also tried to serialize the element pointed by the “use” tag as per “Robert Longson” suggested, with this part of code :

JavaScript

The serialized string looks like this :

JavaScript

The result is the same, I still get a blank image as output.

What am I doing wrong? Any other hint is welcome.

Thanks a lot.

Advertisement

Answer

OK, here is an example that includes the original <symbol>. You can see that it only works when the <symbol> is part of the SVG that is serialized (in the working example I renamed the two class names to “green-check2” and “check-green-symbol2”).

I rearanged the function a bit, including an event listener for the in-memory-image. It is probably not needed here, but a good practice when on a network etc.

JavaScript
JavaScript
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement