Need svg support

[viperphase1]

The cropper doesn't load svgs.

[viperphase1]

Also it would be nice if there was some kind of error message when you try and load an unsupported file type.

[Mawi137]

If you read the readme, you'll find that there's an output that does exactly that.

The problem with an svg is that it doesn't always have a width and height. The width and height need to be set on the svg tag itself else it will not render correctly. You can try it here: https://image-cropper.stackblitz.io. I changed it so svg is allowed there.

[viperphase1]

What if when someone puts in an svg without width and height information you set the size using the resizeToWidth and resizeToHeight parameters? And if resizeToWidth and resizeToHeight are not set use an arbitrary default.

[viperphase1]

Or even the width of the container

[viperphase1]

It's possible to edit svgs in javascript. If that's not an option I think an acceptable fallback would be to convert it to png and use the png in the cropper.

[Mawi137]

Using resizeToWidth is used for the resulting image, so you'll lose a lot of quality if you do that.
Converting it to a png will require a canvas to do so as well, so you'd still need the width. Unless you know another way?
I checked and having only the width in the svg tag is enough for it to render correctly in the cropper. However files are read as dataURL so I have no idea how to add the width automatically to that..

[tuananhgk98]

@Mawi137 , i have try to upload an svg file in this domain: https://image-cropper.stackblitz.io, althought i have set the witdh and height to svg tag, so it doesn't work, plesea help me! thanks

[yinshuxun]

@Mawi137 https://image-cropper.stackblitz.io demo is not support for svg which has width attr

[jpthewes]

for anyone looking into this in the future:
I could change the svg content before it came to ngx-image-cropper in the change handler for the file upload using for example the following:
https://gist.github.com/jpthewes/65c6d3da1517da7c299251bee0338608

with
<input type="file" (change)="onFileChange($event)" />

--> basically taking the height and width from the view box property as a fallback. @Mawi137 do you think something similar would be an option in the codebase itself? If so, I would make a proposal PR.

[burnacid23]

@Mawi137 try to fix the SVG for image cropper, but did not get proper solution ? Is it fixed ? if yes I dont see the code changes for SVG format, Can you suggest me the solution if fixed..