Create SVG QR Codes with embedded logos

[nicolomonili]

Hi, first of all thanks for the library.

I'm working with this example (https://github.com/chillerlan/php-qrcode/blob/v5.0.x/examples/svgWithLogo.php) and it works fine with all the svg images I download from here https://simpleicons.org/.

But when I try to embed my own SVG logos, or this wikipedia example (https://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg), the QrCode doesn't add my SVG logo (there remains an empty space in the center).

Do the SVG images to be embedded have to have a certain format?

Thank you

[nicolomonili]

With github logo from https://simpleicons.org/

[codemasher]

Hey, I just tried here on local and ended up with this (ignoring the parse errors that are produced by the wikipedia logo's headers)

When you remove the XML and DOCTYPE header lines as well as the fixed width and height from the logo SVG, it works perfectly fine (SVG source below):

[nicolomonili]

Thanks for the reply.

I tried to modify the svg code of the wikipedia svg image, keeping only the content of the SVG tag and the following as tag parameters: , but the image is still not displayed. I attach the modified svg image.

There is clearly something wrong with the code of the modified svg image.

[codemasher]

This is what the final rendered code looks like:

<g transform="translate(16.875 16.875) scale(0.25)" class="dark">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 94">
	<title>Wikipedia logo version 2</title>

	<!-- logo svg here -->

	</svg>
</g>

[nicolomonili]

In the meantime, thank you very much, but I haven't yet had the chance to check what you changed compared to the original svg.
I'll try with another svg image (which also didn't work).

[nicolomonili]

From the original svg, you have remove this (I can't post this code)

changed the svg node from

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="103px" height="94px" viewBox="0 0 103 94">

to

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 94">

and removed all the
style=""

it's correct?

[codemasher]

Ok, so I saved the file through the browser as .svg - I noticed that for some reason saving it this way removes some of the <!ENTITY> tags from the original source. I then ran it through the code reformatter and removed the first 2 lines (xml header and doctype) as they would render the SVG invalid:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

and i removed the width and height as well as the x and y attributes from the <SVG> element:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="103px" height="94px" viewBox="0 0 103 94">

to

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 94">

this should normally do the trick with any SVG - might need to play areound with custom namespaces maybe - i haven't tested that yet.

[nicolomonili]

I found a very useful online tool, which is used to "clean up" the svg image.
After uploading an svg image, you can remove some parameters from the image code (such as the doctype, xml header, style attributes, etc etc..)

https://svgomg.net/

[nutthakun]

https://github.com/chillerlan/php-qrcode/blob/main/examples/svgWithLogo.php

I use this code but no logo appears and no errors.
What do I need to fix?

please .

[codemasher]

You're using the example from dev-main, see #241 (comment)

[nutthakun]

Thank you.