Incorrect crop 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?

[0xturner]

I've encountered the same issue. Only SVG's with a fixed height and width are cropped correctly.

Not a perfect solution, but a workaround that worked for my use case is using the view box dimensions as a fallback values if a fixed height and width are not present. I preprocess SVG files, adding a fixed height and width, before passing to react-easy-crop's Cropper

const svg = svgDoc.querySelector("svg");

if (
  !svg ||
  (isFixedPixelValue(svg.getAttribute("width")) &&
    isFixedPixelValue(svg.getAttribute("height")))
) {
  return;
}

const [, , viewBoxWidth, viewBoxHeight] =
  svg.getAttribute("viewBox")?.split(/[\s,]+/) ?? [];

if (!viewBoxWidth || !viewBoxHeight) {
  return;
}

svg.setAttribute("width", viewBoxWidth);
svg.setAttribute("height", viewBoxHeight);

...

function isFixedPixelValue(value: string | null) {
  return value && (/^\d*\.?\d+px$/.test(value) || /^\d*\.?\d+$/.test(value));
}