Add responsive property to help with SVG generation (#163)

* Add responsive property to help with SVG generation * Add missing Laravel code
laravolt · Feb 28, 2025 · e2c552a · e2c552a
1 parent e7717f1
commit e2c552a
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -108,6 +108,11 @@ You may specify custom font-family for your SVG text.
 Avatar::create('Susilo Bambang Yudhoyono')->setFontFamily('Laravolt')->toSvg();
 ```
 
+You may make the SVG responsive. This excludes the height and width attributes.
+```php
+Avatar::create('Susilo Bambang Yudhoyono')->setResponsive()->toSvg();
+```
+
 ## Get underlying Intervention image object
 ```php
 Avatar::create('Abdul Somad')->getImageObject();

diff --git a/config/config.php b/config/config.php
@@ -34,6 +34,9 @@
     // Image height, in pixel
     'height' => 100,
 
+    // Responsive SVG, height and width attributes are not added when true
+    'responsive' => false,
+
     // Number of characters used as initials. If name consists of single word, the first N character will be used
     'chars' => 2,
 

diff --git a/src/Avatar.php b/src/Avatar.php
@@ -30,6 +30,8 @@ class Avatar
 
     protected int $height;
 
+    protected bool $responsive = false;
+
     protected array $availableBackgrounds = [];
 
     protected array $availableForegrounds = [];
@@ -134,6 +136,7 @@ public function applyTheme(array $config): void
         $this->fontSize = $config['fontSize'];
         $this->width = $config['width'];
         $this->height = $config['height'];
+        $this->responsive = $config['responsive'];
         $this->ascii = $config['ascii'];
         $this->uppercase = $config['uppercase'];
         $this->rtl = $config['rtl'];
@@ -210,7 +213,11 @@ public function toSvg(): string
         $radius = ($this->width - $this->borderSize) / 2;
         $center = $this->width / 2;
 
-        $svg = '<svg xmlns="http://www.w3.org/2000/svg" width="'.$this->width.'" height="'.$this->height.'" viewBox="0 0 '.$this->width.' '.$this->height.'">';
+        $svg = '<svg xmlns="http://www.w3.org/2000/svg"';
+        if (! $this->responsive) {
+            $svg .= ' width="'.$this->width.'" height="'.$this->height.'"';
+        }
+        $svg .= ' viewBox="0 0 '.$this->width.' '.$this->height.'">';
 
         if ($this->shape === 'square') {
             $svg .= '<rect x="'.$x
@@ -455,6 +462,7 @@ protected function validateConfig(array $config): array
             'fontSize' => 48,
             'width' => 100,
             'height' => 100,
+            'responsive' => false,
             'ascii' => false,
             'uppercase' => false,
             'rtl' => false,

diff --git a/src/Concerns/AttributeSetter.php b/src/Concerns/AttributeSetter.php
@@ -45,6 +45,13 @@ public function setDimension($width, $height = null): static
 
         return $this;
     }
+
+    public function setResponsive($responsive): static
+    {
+        $this->responsive = $responsive;
+
+        return $this;
+    }
 
     public function setFontSize($size): static
     {

diff --git a/tests/AvatarLaravelTest.php b/tests/AvatarLaravelTest.php
@@ -16,6 +16,7 @@ public function it_can_override_attributes_when_instantiated()
             'shape' => 'circle',
             'width' => 100,
             'height' => 100,
+            'responsive' => true,
             'chars' => 2,
             'fontSize' => 48,
             'fonts' => ['arial.ttf'],
@@ -37,6 +38,7 @@ public function it_can_override_attributes_when_instantiated()
         $this->assertEquals('circle', $avatar->getAttribute('shape'));
         $this->assertEquals(100, $avatar->getAttribute('width'));
         $this->assertEquals(100, $avatar->getAttribute('height'));
+        $this->assertEquals(true, $avatar->getAttribute('responsive'));
         $this->assertEquals(['#000000'], $avatar->getAttribute('availableBackgrounds'));
         $this->assertEquals(['#FFFFFF'], $avatar->getAttribute('availableForegrounds'));
         $this->assertEquals(['arial.ttf'], $avatar->getAttribute('fonts'));

diff --git a/tests/AvatarPhpTest.php b/tests/AvatarPhpTest.php
@@ -290,6 +290,31 @@ public function it_can_generate_rectangle_svg()
         $this->assertEquals($expected, $svg);
     }
 
+    /**
+     * @test
+     */
+    public function it_can_generate_responsive_svg()
+    {
+        $expected = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">';
+        $expected .= '<rect x="5" y="5" width="90" height="90" stroke="yellow" stroke-width="10" rx="15" fill="red" />';
+        $expected .= '<text font-size="24" fill="white" x="50%" y="50%" dy=".1em" style="line-height:1" alignment-baseline="middle" text-anchor="middle" dominant-baseline="central">AB</text>';
+        $expected .= '</svg>';
+
+        $avatar = new \Laravolt\Avatar\Avatar();
+        $svg = $avatar->create('Andi Budiman')
+                      ->setShape('square')
+                      ->setFontSize(24)
+                      ->setDimension(100, 100)
+                      ->setForeground('white')
+                      ->setBorder(10, 'yellow')
+                      ->setBorderRadius(15)
+                      ->setBackground('red')
+                      ->setResponsive(true)
+                      ->toSvg();
+
+        $this->assertEquals($expected, $svg);
+    }
+
     /**
      * @test
      */