SVG output, text is not centered vertically

[neoteknic]

With SVG output, text is not centered vertically.
Chrome : not well centered
Edge : text is on top

Solution : correct default value + add parameters to give an offset X, Y to the text.

version : 2.1.0

[neoteknic]

• suggestion : is it possible to vectorize text instead of output it in SVG ?

[uyab]

Hi @neoteknic, sorry I little bit busy in recent weeks. Any help welcome for this issue :)

[neoteknic]

Maybe a font issue, look at this image on Google chrome windows 10 x64.

[neoteknic]

Chrome ; Firefox ; Edge
Browser issue ? but possible to fire in Avatar.php toSvg() maybe.

[fannyfan414]

I extend Avatar class and in method toSvg add 4px to "y" coordinate.
This line

$svg .= '<text x="' . $center . '" y="' . ($center + 4);

With this modification content is now aligned correctly

<?php
/**
 * Created by PhpStorm.
 * User: Workstation
 * Date: 11.09.2019
 * Time: 23:21
 */

namespace App\Services\AvatarGenerator;


use Laravolt\Avatar\Avatar;

class AvatarGenerator extends Avatar
{
    public function toSvg()
    {
        $this->buildInitial();

        $x = $y = $this->borderSize / 2;
        $width = $height = $this->width - $this->borderSize;
        $radius = ($this->width - $this->borderSize) / 2;
        $center = $this->width / 2;

        $svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="' . $this->width . '" height="' . $this->height . '">';

        if ($this->shape == 'square') {
            $svg .= '<rect x="' . $x
                . '" y="' . $y
                . '" width="' . $width . '" height="' . $height
                . '" stroke="' . $this->borderColor
                . '" stroke-width="' . $this->borderSize
                . '" fill="' . $this->background . '" />';
        } elseif ($this->shape == 'circle') {
            $svg .= '<circle cx="' . $center
                . '" cy="' . $center
                . '" r="' . $radius
                . '" stroke="' . $this->borderColor
                . '" stroke-width="' . $this->borderSize
                . '" fill="' . $this->background . '" />';
        }

        $svg .= '<text x="' . $center . '" y="' . ($center + 4);
        $svg .= '" font-size="' . $this->fontSize;

        if ($this->fontFamily) {
            $svg .= '" font-family="' . $this->fontFamily;
        }

        $svg .= '" fill="' . $this->foreground . '" alignment-baseline="middle" text-anchor="middle" dominant-baseline="central">';
        $svg .= $this->getInitial();
        $svg .= '</text>';

        $svg .= '</svg>';

        return $svg;
    }

}

[uyab]

Just found https://github.com/meyfa/php-svg, will try to refactor the svg part using it.

[danpalmieri]

Poor (but fast 😶) workaround:
{!! Str::replaceFirst(' y="50"', ' y="54"', Avatar::create('Susilo Bambang Yudhoyono')->toSvg()) !!}

[uyab]

Fixed in 4.1.4