SVG qr code with logo. Logo is not displayed in the Adobe Illustrator

[Drayfer]

When I download a qr code with a logo in svg format and try to open the image in Adobe Illustrator, an empty space is displayed instead of the logo. The image opens correctly in the browser.
How to solve this problem?

[MATTiVOLTARii]

same Issue

[MATTiVOLTARii]

I found a workaround. I use qr-code-styling in a Node environment, so I get the data with .getRawData and from there I can change the QR code - to display the png it is enough to rewrite the href as xlink:href.

Otherwise you can also use your SVG, here is an example but the size and position still have to be adjusted:

const svgLogo = fs.readFileSync("media/logo/qr-logo.svg", { encoding: "utf-8" });

     qrCodeSvg.getRawData("svg").then((buffer) => {
       let svgString = buffer.toString('utf8'); // convert buffer to string
       const logoSVG = svgLogo; // SVG code of the logo
      
       //svgString = svgString.replace('<image href="data:image/png;base64', '<image xlink:href="data:image/png;base64');
       svgString = svgString.replace(/<image[^>]*\/>/, `${logoSVG}`); // Insert logo SVG code
    
       const newBuffer = Buffer.from(svgString, 'utf8'); // convert string to buffer
       fs.writeFileSync(svgFile, newBuffer); // Save on computer
     }),

I also have the problem that the QR code is not displayed in black in Illustrator but without color filling, do you know what could be the reason?

[izoukhai]

@MATTiVOLTARii how did you manage to run the package in a Node environment?

[boerninator]

Is there an actual solution to this problem? Cant seem to fix it.