Text is not aligned

[philipbrito]

I have a SVG file with a rect and text element. The text should be aligned in the center of the rect.

The SVG file is as follow:

<svg xmlns="http://www.w3.org/2000/svg">
   <rect width="100%" height="100%" rx="6" ry="6" fill="#607D1B" />
   <text x="45%" y="60%" fill="#ffffff" font-family="Helvetica, Arial, Lucida Grande, sans-serif" font-size="50">F</text>
</svg>

On the browser, the SVG file is displayed as expected (you can simple change the extension file from .svg to .html to confirm it), looking like this:

But when using androidsvg library I get this weird result:

Note: I'm using the latest changes made in this library by adding this project as a module in my application, because the last release available in the Maven Central Repository was 4 years ago 😱

[BigBadaboom]

Hi Filipe. Thanks for the bug report.

AndroidSVGs rendering could be valid. The SVG doesn't have a width or height, so how it renders will depend solely on how big you are drawing the SVG.

In the case of the browser, it is likely defaulting to the standard 300x150 size that the HTML uses for dimensions that are indeterminate.

That won't be the case for your app. What size are you using? Are you drawing it yourself into a view? Or are you using an SVGImageView or ImageView?

From your android screenshot, it looks like the size is 80x80. If we specify that size in a browser, we get the same result:

https://jsfiddle.net/b46kk2v5/1/

[philipbrito]

Hi @BigBadaboom. Thanks for your response.

I'm using androidsvg library with Fresco library. As you can see here the width and height of the image are defined in 40dp and 40dp, respectively.

The size of the image is drawn correctly, but the problem comes when showing the text inside it.

As pointed by you the SVG file doesn't have the width and height elements and after adding it I finally get the desired result in the Android application.

Additional note: from the jsfiddle link above (really thanks for providing it - helped me a lot) if, for instance, we change the text from "F" to "W", we can see that the position of the text changes. So In order to make the text centralised (working fine for any alphabetical letter) I had to add others elements, as seen here: https://jsfiddle.net/filipedelimabrito/54gy635j/

It is nice to see this library in use with Fresco and it would be really nice to see the updates made to this library available in the Maven Central Repository ❤️

Thank you!

[BigBadaboom]

Instead of specifying a particular width and height, another, possibly better, option would be to specify a viewBox instead. That way the SVG should look correct no matter what size you make it.

https://jsfiddle.net/b46kk2v5/2/

it would be really nice to see the updates made to this library available in the Maven Central Repository

A new version will be released soon. As soon as I am finished with my current bug fixing spree. :)

[philipbrito]

Really appreciate your efforts and your advice. Let me know if you have a personal or project account (pay pal, whatever) to support you - a coffee or a drink would fit well.

Thank you!

[BigBadaboom]

Thank you for the offer. I appreciate it. But no donation is necessary. :)

Is it okay to tweet or otherwise publicise that AndroidSVG is used in RocketChat?