Incorrect corp area output when the input is SVG

[JohnCido]

Describe the bug
When trying to crop an SVG file, the final output cropped area is wrong. So any code that relies on this output will generate wrong image output.

To Reproduce
Steps to reproduce the behavior:

1. Open this sandbox
2. Download this image
   
3. Open this file in the sandbox
4. Crop it and see the output

Expected behavior
Crop the exact area that the user has defined using the cropper.

• Please create a CodeSandbox that demonstrates your issue. You can fork the Basic example: https://codesandbox.io/s/react-easy-crop-v69ly910ql.

[ValentinH]

Indeed, something is wrong with the sizes computation. First thing I noticed is that naturalWidth/naturalHeight doesn't exist for SVGs and we are using this to measure to media size here:

react-easy-crop/src/Cropper.tsx

Lines 245 to 246 in 4e31ef2

	const naturalWidth = this.imageRef?.naturalWidth || this.videoRef?.videoWidth || 0
	const naturalHeight = this.imageRef?.naturalHeight || this.videoRef?.videoHeight || 0

I guess we should use width/height in that case but we need to check if something else needs to be adjusted.

[raed667]

Cropping works with some other SVGs, for example this image https://user-images.githubusercontent.com/1442690/182855138-e84d1916-8a19-4152-89a8-4c9074f54dfd.svg

Could it be that the difference is that the original svg has width="100%" height="100%" viewBox="0 0 3200 3200" and my example has width="640" height="480" viewBox="0 0 640 480" ?

[tonyfarney]

I am facing the same issue here. Is there some workaround?