:octocat: QRMarkup::svg() removed width/height in favor of viewBox #30

examples/svg.php

@@ -21,7 +21,7 @@ $options = new QROptions([
 	'version'      => 7,
 	'outputType'   => QRCode::OUTPUT_MARKUP_SVG,
 	'eccLevel'     => QRCode::ECC_L,
-	'scale'        => 5,
+	'svgViewBoxSize' => 530,
 	'addQuietzone' => true,
 	'cssClass'     => 'my-css-class',
 	'svgOpacity'   => 1.0,

src/Output/QRMarkup.php

@@ -24,6 +24,13 @@ class QRMarkup extends QROutputAbstract{
 	 */
 	protected $defaultMode = QRCode::OUTPUT_MARKUP_SVG;
 
+	/**
+	 * @see \sprintf()
+	 *
+	 * @var string
+	 */
+	protected $svgHeader = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="qr-svg" style="width: 100%%; height: auto;" viewBox="0 0 %1$d %1$d">';
+
 	/**
 	 * @return void
 	 */
@@ -74,11 +81,9 @@ class QRMarkup extends QROutputAbstract{
 	 * @return string
 	 */
 	protected function svg():string{
-		$scale  = $this->options->scale;
-		$length = $this->moduleCount * $scale;
 		$matrix = $this->matrix->matrix();
 
-		$svg = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="'.$length.'px" height="'.$length.'px">'
+		$svg = sprintf($this->svgHeader, $this->options->svgViewBoxSize ?? $this->moduleCount)
 		       .$this->options->eol
 		       .'<defs>'.$this->options->svgDefs.'</defs>'
 		       .$this->options->eol;
@@ -97,7 +102,7 @@ class QRMarkup extends QROutputAbstract{
 						$count++;
 
 						if($start === null){
-							$start = $x * $scale;
+							$start = $x;
 						}
 
 						if($row[$x + 1] ?? false){
@@ -106,8 +111,8 @@ class QRMarkup extends QROutputAbstract{
 					}
 
 					if($count > 0){
-						$len = $count * $scale;
-						$path .= 'M' .$start. ' ' .($y * $scale). ' h'.$len.' v'.$scale.' h-'.$len.'Z ';
+						$len = $count;
+						$path .= 'M' .$start. ' ' .$y. ' h'.$len.' v1 h-'.$len.'Z ';
 
 						// reset count
 						$count = 0;

src/QROptions.php

@@ -33,6 +33,7 @@ use chillerlan\Settings\SettingsContainerAbstract;
  * @property string $cssClass
  * @property string $svgOpacity
  * @property string $svgDefs
+ * @property int    $svgViewBoxSize
  *
  * @property string $textDark
  * @property string $textLight

src/QROptionsTrait.php

@@ -137,6 +137,17 @@ trait QROptionsTrait{
 	 */
 	protected $svgDefs = '<style>rect{shape-rendering:crispEdges}</style>';
 
+	/**
+	 * SVG viewBox size. a single integer number which defines width/height of the viewBox attribute.
+	 *
+	 * viewBox="0 0 x x"
+	 *
+	 * @see https://css-tricks.com/scale-svg/#article-header-id-3
+	 *
+	 * @var int
+	 */
+	protected $svgViewBoxSize;
+
 	/**
 	 * string substitute for dark
 	 *