SVG QR Code with circles having background

[rexwebmedia]

Describe the feature

I want to add a background to circular modules with opacity and different color. I tried to edit the code to add squares behind the circles but that's not working. I also can't change color because many QR Code modules are in single element.

Code sample

<?php

require_once('vendor/autoload.php');

use chillerlan\QRCode\Common\EccLevel;
use chillerlan\QRCode\{QRCode, QRCodeException, QROptions};
use chillerlan\QRCode\Data\QRMatrix;
use chillerlan\QRCode\Output\{QROutputInterface, QRMarkupSVG};

// $imgLink = 'https://lifelinkup.com/wp-content/uploads/2023/08/download-1.jpeg';
$imgLink = 'jackson.jpeg';
$data = 'https://lifelinkup.com/memorials-tributes/jackson-martinez/';

class QRSvgWithLogoAndCustomShapes extends QRMarkupSVG {

    protected function paths():string{
        $this->options->connectPaths = false;
        $svg = parent::paths();
        $svg = str_replace('"/>', $this->getFinderPatterns().'"/>', $svg);
        return $svg;
    }

    protected function path(string $path, int $M_TYPE):string{
        return sprintf('<path class="%s" d="%s"/>', $this->getCssClass($M_TYPE), $path);
    }

    protected function module(int $x, int $y, int $M_TYPE):string{
        if(
            $this->options->drawCircularModules &&
            !$this->matrix->checkTypeIn($x, $y, $this->options->keepAsSquare)
        ){
            $r = $this->options->circleRadius;
            // return sprintf(' M%1$s %2$s a%3$s %3$s 0 1 0 %4$s 0 a%3$s %3$s 0 1 0 -%4$s 0Z  M%1$s %2$s m-0.1,-0.5 h1 v1 h-1 v-1 Z', ($x + 0.5 - $r), ($y + 0.5), $r, ($r * 2));
            return sprintf('M%1$s %2$s a%3$s %3$s 0 1 0 %4$s 0 a%3$s %3$s 0 1 0 -%4$s 0z M%1$s %2$s m-0.1,-0.5 h1 v1 h-1 v-1 z ', ($x + 0.5 - $r), ($y + 0.5), $r, ($r * 2));
        }
        if(
            !$this->matrix->check($x, $y)
            || $this->matrix->checkType($x, $y, QRMatrix::M_FINDER)
            || $this->matrix->checkType($x, $y, QRMatrix::M_FINDER_DOT)
        ){
            return '';
        }

        // return sprintf('M%1$s %2$s m0.5,0.96 l-0.412,-0.412 a0.3 0.3 0 0 1 0.412,-0.435 a0.3 0.3 0 0 1 0.412,0.435Z', $x, $y);
        $r = $this->options->circleRadius;

        return sprintf('M%1$s %2$s a%3$s %3$s 0 1 0 %4$s 0 a%3$s %3$s 0 1 0 -%4$s 0Z', ($x + 0.5 - $r), ($y + 0.5), $r, ($r * 2));
    }

    protected function getFinderPatterns():string{
        $qz  = ($this->options->addQuietzone) ? $this->options->quietzoneSize : 0;
        $pos = [
            [(0 + $qz), (0 + $qz)],
            [(0 + $qz), ($this->moduleCount - $qz - 7)],
            [($this->moduleCount - $qz - 7), (0 + $qz)],
        ];

        $path = 'M%1$s,%2$s';
        $path .= ' M%1$s,%2$s m3.5,0';
        $path .= ' q3.5,0 3.5,3.5';
        $path .= ' q0,3.5 -3.5,3.5';
        $path .= ' q-3.5,0 -3.5,-3.5';
        $path .= ' q0,-3.5 3.5,-3.5z';
        $path .= ' m0,1';
        $path .= ' q-2.5,0 -2.5,2.5';
        $path .= ' q0,2.5 2.5,2.5';
        $path .= ' q2.5,0 2.5,-2.5';
        $path .= ' q0,-2.5 -2.5,-2.5z';

        $path .= ' m-1.5,2.5';
        $path .= ' a1.5,1.5 0 1 0 3,0';
        $path .= ' a1.5,1.5 0 1 0 -3,0Z';
        $finder = [];

        foreach($pos as [$ix, $iy]){
            $finder[] = sprintf($path, $ix, $iy);
        }
        return implode(' ', $finder);
    }
}

$options = new QROptions;
$options->version = 7;
$options->eccLevel = EccLevel::H;
$options->outputType          = QROutputInterface::MARKUP_SVG;
$options->outputBase64        = false;
$options->drawLightModules    = true;
$options->markupDark          = '';
$options->markupLight         = '';

$options->outputType      = QROutputInterface::CUSTOM;
$options->outputInterface = QRSvgWithLogoAndCustomShapes::class;

$options->drawCircularModules = true;
$options->circleRadius        = 0.4;
$options->quietzoneSize = 2;

$options->connectPaths        = false;
$options->keepAsSquare        = [
    QRMatrix::M_FINDER_DARK,
    QRMatrix::M_FINDER_DOT,
    QRMatrix::M_FINDER_DOT,
    QRMatrix::M_ALIGNMENT_DARK,
];
$options->svgDefs = '
    <linearGradient id="rainbow" x1="1" y2="1">
        <stop stop-color="#e2453c" offset="0"/>
        <stop stop-color="#e07e39" offset="0.2"/>
        <stop stop-color="#e5d667" offset="0.4"/>
        <stop stop-color="#51b95b" offset="0.6"/>
        <stop stop-color="#1e72b7" offset="0.8"/>
        <stop stop-color="#6f5ba7" offset="1"/>
    </linearGradient>
    <style><![CDATA[
        .dark{fill: #212121;}
        .light{fill:#ffffff;}
    ]]></style>';

try {
    $out = (new QRCode($options))->render($data);
}
catch(Throwable $e){
    exit($e->getMessage());
}

header('Content-type: image/svg+xml');

$imageContent = file_get_contents($imgLink);
$base64Image = base64_encode($imageContent);
$base64Image = 'data:image/jpeg;base64,' . $base64Image;

$modifiedSvgContent = $out;
$modifiedSvgContent = str_replace('<svg', '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ', $modifiedSvgContent);
$modifiedSvgContent = str_replace('<defs>', '<image x="0" y="0" width="100%" height="100%" style="opacity:0.6" xlink:href="'. $base64Image .'" /><defs>', $modifiedSvgContent);

echo $modifiedSvgContent;
file_put_contents('img/sample-1.svg', $modifiedSvgContent);

exit;

Additional context

Please help me little bit to create something like this:

Here's what I was able to do:

Are you (the requester) willing to submit a pull request for that feature?

No

[codemasher]

Hi, I'm the author of this library, but I'm not an SVG expert, nor the general support hotline. From what it looks, you need to put the image as a background of the SVG element via CSS.

[codemasher]

You're almost there, you just need to make the quiet zone modules transparent and maybe use a custom shape for the rest of the modules. You can find examples for this in the examples folder or here in discussions.

[rexwebmedia]

Can every module have it's own path?
If there's any example where every module have it's own path, then please share the link.

[codemasher]

What do you mean by "every module have its own path"? That doesn't even make sense.

[rexwebmedia]

SVG file generated by https://www.qrcode-monkey.com/ has individual <path> for each dot. So if every dot has it's own path then customization would be easier.

Here's the SVG file generated by the QR Code Monkey website.

[codemasher]

That's an entirely different concept which comes with its own issues, see #127 (comment). I still don't understand what you think you can achieve with separate modules that you can't achieve with all modules in a single path. You can easily select/exclude modules by pattern type, which is already in your above example code - what more do you need?

[codemasher]

By the way you can modify the SVG output so that it returns single modules instead of a single path, which is basically what the OP of #127 does in their example.

[rexwebmedia]

how can I make the SVG width 192px. the "scale" option doesn't work on SVG and viewbox option only make viewbox wide but not the entire svg.

[codemasher]

You can either use CSS styles in the SVG <defs> or an external stylesheet (which is the preferred way) or manually add width/height attributes:

php-qrcode/examples/imagickConvertSVGtoPNG.php

Lines 30 to 49 in cf7e82b

	protected function header():string{
	[$width, $height] = $this->getOutputDimensions();
	// we need to specify the "width" and "height" attributes so that Imagick knows the output size
	$header = sprintf(
	'<svg xmlns="http://www.w3.org/2000/svg" class="qr-svg %1$s" viewBox="%2$s" preserveAspectRatio="%3$s" width="%5$s" height="%6$s">%4$s',
	$this->options->cssClass,
	$this->getViewBox(),
	$this->options->svgPreserveAspectRatio,
	$this->options->eol,
	($width * $this->scale), // use the scale option to modify the size
	($height * $this->scale)
	);
	if($this->options->svgAddXmlHeader){
	$header = sprintf('<?xml version="1.0" encoding="UTF-8"?>%s%s', $this->options->eol, $header);
	}
	return $header;
	}