Consistent background behavior

[strider72]

Backgrounds behave differently with SVGs compared to other common image formats. Even if you ask for solid background, its not there with SVG. Dev has stated this is because you can style it with CSS anyway, but this doesn't apply if, for example, you're generating an image for download. Even with CSS, there is no obvious element to style. I'm working with circular modules, and even with "visible" background the background itself is also dots with transparent gaps.

Feature request

With SVG format, please:

• add a containing square that is behind all other elements, sized to the outer edge of the Quiet Zone, and
• if image is not transparent, set the box to the background color. If image is transparent, box is either transparent or just display:none.

A simple box to style would simplify things greatly. The box following the requested background formatting/color is even better.

[codemasher]

The thing about SVG is that unlike solid colors in raster graphics it has not only opaque fills via the fill attribute but it can also support gradients via CSS or inline style attribute or defs and opacity via the opacity attribute or CSS or... I could add a "simple" solution that may support one specific case, but any other case would still require to extend the SVG output class - which you can do also, specific to your use case - which is why i made the library extensible in first place.
So what you can do for your specific case is to extend the class and add a fill or style attribute to the header over here:

php-qrcode/src/Output/QRMarkupSVG.php

Lines 75 to 90 in c8c37a4

	protected function header():string{
	$width = ($this->options->svgWidth !== null) ? sprintf(' width="%s"', $this->options->svgWidth) : '';
	$height = ($this->options->svgHeight !== null) ? sprintf(' height="%s"', $this->options->svgHeight) : '';
	/** @noinspection HtmlUnknownAttribute */
	return sprintf(
	'<?xml version="1.0" encoding="UTF-8"?>%6$s'.
	'<svg xmlns="http://www.w3.org/2000/svg" class="qr-svg %1$s" viewBox="0 0 %2$s %2$s" preserveAspectRatio="%3$s"%4$s%5$s>%6$s',
	$this->options->cssClass,
	($this->options->svgViewBoxSize ?? $this->moduleCount),
	$this->options->svgPreserveAspectRatio,
	$width,
	$height,
	$this->options->eol
	);
	}

[strider72]

SVG has a lot of flexibility, but can you agree that people might expect the image to be the same, given the same parameters? I mean, a solid color (probably white) background for a QR Code is an incredibly common use case. It makes sense that if somebody sets background color (and transparency false) that it would have a background color. Indeed it works exactly like that with other formats.

If somebody wants a gradient or something unusual like that, they can still extend the class. That's a bonus of using the flexible SVG format. But for the very common case that many users might want, it makes sense to make the already-existing one-liner option work.

I could extend the header to add a rect element, but to do so I have to duplicate the code of the entire header function. As structured, I can't just run PARENT::header(), because the insertion happens in the middle, I have to manually reproduce the whole function. Now, any time the library is updated I need to check that you didn't change something else. Something as minor as a white background has now become an ongoing maintenance task.

(Yeah, I could use PHP to parse the header XML structure, but... no. Please God, no.)

[EDIT: I was wrong on that point. Just use parent and add to the end. Please see this comment. I think the rest regarding basic vs advanced usage still stands.]

Heck, just adding something like the following line before the first path would be helpful:

<rect width="%2$s" height="%2$s" class="qr_BG" />

(It wouldn't help my "make a file for download" situation, but it would be helpful for easy CSS styling.)

Best would be that if transparency is false, and if a background color is set, add

<rect width="%2$s" height="%2$s" class="qr_BG" style="fill:rgb( BACKGROUND COLOR );" />

If somebody is doing something more complex such as a gradient, they can extend the class as needed and ignore the "basic" background options. So doing this doesn't hurt the people doing advanced stuff, but it greatly simplifies things for people doing basic stuff.

[codemasher]

What's the gotcha here? GD output was the default until v4.x and the image* prefixed options used to be exclusive to that.

[strider72]

No gotcha. Just... your answer there was great because the solution is so simple and it works. That's really good design.

And yes, it's better than if your answer had been "Sure... just look through the documentation and find the custom output examples; then write some custom classes, and....". If they guy has asked how to make gradient backgrounds, then "here's an example" is perfect. But an obvious, simple use case had a clear concise answer here.

There was a reason to add the bgcolor option -- (or more specifically, the imageTransparent = false option?). It's straightforward and useful.

i added the bgcolor option the last time when you were here for a similar "issue"

You did?? I'm not sure if that was me. I've asked a couple questions before, but I don't see anything related. Is bgcolor a really recent change?

[codemasher]

"Sure... just look through the documentation and find the custom output examples; then write some custom classes, and...."

I'm not sure how you do things, but if i'm planning to use a library, i usually go through the documentation and look for usage examples. Admittedly, the documentation could be better (in fact, i'm working on that for v5), but examples for several use cases and internal workings are provided.

There was a reason to add the bgcolor option -- (or more specifically, the imageTransparent = false option?). It's straightforward and useful.

Honestly, i regret the imageTransparent option because of how GD and Imagick handle transparency internally. It created more confusion than it was helpful.

Is bgcolor a really recent change?

It is so recent that it doesn't exist in v4.x, only in the v5 beta. It used to be imageTransparencyBG and used to work with imagecolortransparent() specifically. I have since changed how transparency is handled for GD and Imagick and added the more common bgColor which is also used in FPDF output as it behaves very similar to the aforementioned.

[strider72]

Yeah, design is subjective. Programming would be easy if it were all cut and dried.

At any rate, I realized something as I was having lunch....

i will not "solve" a non-issue just for the sake of consistency

This indicates a rather fundamental disagreement in terms of philosophy. A matter of First Principles -- which means quibbling over details will never resolve with agreement. I discussed my design philosophy above. To me, consistency in user interface is an inherent good. In essence, you do it simply because it's fundamentally the best way to do it, as a matter of usability -- unless there's a specific identifiable drawback that counterindicates.

You see it differently. And in the end, that's totally cool. Different people are different. What I mean to say is that I'm going to bow out on this one, because I don't imagine we're going to come to any agreement here. So be it.

I'll leave with one last thing:

if i'm planning to use a library, i usually go through the documentation and look for usage examples

I did. I didn't look for "custom output" and the like, I looked for "background", and I saw the info on how to get a background by turning off imageTransparent and setting bgColor. A perfect example of why (IMO) consistency is inherently good.

Peace. It's a cool library, and I will certainly keep using it.

[codemasher]

This indicates a rather fundamental disagreement in terms of philosophy.

It's not that there is disagreement, in fact, i try to keep things consistent where it is possible.
As i've stated before, there is no clean solution for this specific feature that justifies "consistency" over functionality, especially for something that can be solved in so many ways already by the built-in options (see: svgDefs). And i will not settle for a mediocre solution to make things consistent just for the sake of it.

Also it should be noted that several options just exist because of how the internals of several libraries/extensions work. The imageTransparent option exists because of GD in first place, the bgColor (and its former variants) because of how transparency is toggled in GD. SVG just does not need these options as it has everything built-in via CSS or attributes - and because of the different ways it can be implemented, i decided to make the SVG class as convenient to extend as possible.

[strider72]

Quick followup question: If I do extend the QRMarkupSVG class, what's the proper way to get the code to use that instead of the standard class?

EDIT: I see it. outputType and outputInterface, per https://github.com/chillerlan/php-qrcode/blob/main/examples/svgWithLogo.php

[codemasher]

Yes that's how it is supposed to work.

[shirshak007]

Can anyone help me achieve colourful QR code using OUTPUT_MARKUP_PNG

  // set returnResource to true to skip further processing for now
  $this->options->returnResource = true;
  
  // of course you could accept other formats too (such as resource or Imagick)
  // i'm not checking for the file type either for simplicity reasons (assuming PNG)
  if(!is_file($logo) || !is_readable($logo)){
  throw new QRCodeOutputException('invalid logo');
  }
  
  $this->matrix->setLogoSpace(
  $this->options->logoSpaceWidth,
  $this->options->logoSpaceHeight
  // not utilizing the position here
  );
  
  // there's no need to save the result of dump() into $this->image here
  parent::dump($file);
  
  $im = imagecreatefrompng($logo);
  
  // get logo image size
  $w = imagesx($im);
  $h = imagesy($im);
  
  // set new logo size, leave a border of 1 module (no proportional resize/centering)
  $lw = ($this->options->logoSpaceWidth - 2) * $this->options->scale;
  $lh = ($this->options->logoSpaceHeight - 2) * $this->options->scale;
  
  // get the qrcode size
  $ql = $this->matrix->size() * $this->options->scale;
  
  // scale the logo and copy it over. done!
  imagecopyresampled($this->image, $im, ($ql - $lw) / 2, ($ql - $lh) / 2, 0, 0, $lw, $lh, $w, $h);
  
  $imageData = $this->dumpImage();
  
  if($file !== null){
  $this->saveToFile($imageData, $file);
  } 
  
  if($this->options->imageBase64){
  $imageData = 'data:image/'.$this->options->outputType.';base64,'.base64_encode($imageData);
  }
  
  return $imageData;

Options:

`$options = new LogoOptions(
    [
        'eccLevel' => QRCode::ECC_H,
        'imageBase64' => false,
        'logoSpaceHeight' => 17,
        'logoSpaceWidth' => 17,
        'scale' => 20,
        'version' => 7,
        'addQuietzone' => true,
        'quietzoneSize' => 1,
        
    ]
    );

[codemasher]

Hi, I'm not sure what exactly you're trying to achieve. Also please open a new discussion instead of replying to an unrelated one, as the OP will get unnecessary notifications.