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.

[kozakdenys]

Hi @Glorfi, @waglons , @sebastienb
It should be partially fixed in version v1.8.0.
The image is still not displayed in Illustrator, but I can't fix it as Illustrator doesn't fully support SVG standard