Data-URI doesn't handle URI-encoding (percent-escaping)

Steps to Reproduce

Based on the documentation showing support for data URI in the following syntax

var Canvas = require('canvas');
var canvas = Canvas.createCanvas(200, 200);
var ctx = canvas.getContext('2d');

const img = new Image()
img.onload = () => ctx.drawImage(img, 0, 0)
img.onerror = err => { throw err }

img.src = SOME_DATA_URI

I had passed the following valid SVG data-uri

data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' focusable=
'false' data-prefix='fas' data-icon='envelope-open' class='svg-inline--fa fa-env
elope-open fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5
12 512' style='color: %23ff00ff%3Bbox-sizing: border-box%3Bwidth: 600%3Bheight:
600%3Bpadding: 24px%3Bbackground-color: %23000000%3Bborder-radius: 10px%3B'%3E%3
Cpath fill='currentColor' d='M512 464c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.4
9-48-48V200.724a48 48 0 0 1 18.387-37.776c24.913-19.529 45.501-35.365 164.2-121.
511C199.412 29.17 232.797-.347 256 .003c23.198-.354 56.596 29.172 73.413 41.433
118.687 86.137 139.303 101.995 164.2 121.512A48 48 0 0 1 512 200.724V464zm-65.66
6-196.605c-2.563-3.728-7.7-4.595-11.339-1.907-22.845 16.873-55.462 40.705-105.58
2 77.079-16.825 12.266-50.21 41.781-73.413 41.43-23.211.344-56.559-29.143-73.413
-41.43-50.114-36.37-82.734-60.204-105.582-77.079-3.639-2.688-8.776-1.821-11.339
1.907l-9.072 13.196a7.998 7.998 0 0 0 1.839 10.967c22.887 16.899 55.454 40.69 10
5.303 76.868 20.274 14.781 56.524 47.813 92.264 47.573 35.724.242 71.961-32.771
92.263-47.573 49.85-36.179 82.418-59.97 105.303-76.868a7.998 7.998 0 0 0 1.839-1
0.967l-9.071-13.196z'%3E%3C/path%3E%3C/svg%3E

and gotten image error Error: Unsupported image type at setSource.

Here's a demo on codesandbox: https://codesandbox.io/s/eloquent-noether-byf8wm

What will it take to support this? I'll be happy to help where needed with code or sponsor contribution.

I intially included this as a comment in #1709 but thought it might need its own issue.