Downloaded SVG turns to blacksquare when opened with Illustrator and other editors

[Glorfi]

Hi there! Thanks for the awsome library. Yet there's an issue with downloaded SVG file. Once I download an SVG file and try to open it with something other than a browser or Figma, it turns into a black square when I import it for instance in Adobe Illustrator or Photoshop. Any ideas on how to solve it?

Bellow is sample SVG generated with the library.

The options used to make one:

const getOptions = () => { return { width: 200, height: 200, type: 'canvas' as DrawType, data: props.url, image: data:image/svg+xml;base64,${btoa(getLogo(''))}, margin: 0, qrOptions: { typeNumber: 0 as TypeNumber, mode: 'Byte' as Mode, errorCorrectionLevel: 'H' as ErrorCorrectionLevel, }, imageOptions: { hideBackgroundDots: true, imageSize: 0.4, margin: 20, crossOrigin: 'anonymous', }, dotsOptions: { color: qrColor, type: 'rounded' as DotType, }, backgroundOptions: { color: '#FFFFFF', }, cornersSquareOptions: { color: qrColor, type: '' as CornerSquareType, }, cornersDotOptions: { color: qrColor, type: '' as CornerDotType, }, } as Options; };

Any ideas on how to solve it?

[waglons]

Try opening the file in Illustrator with a "File > Open" instead of dragging it in. We noticed that solved this issue.

[sebastienb]

having the same issue in sketch.