Teamspeak SVG troubles

TeamSpeak Client
,
1

Hello,
I discovered that svg wear compatible with Teamspeak
So I tryed to make a some text svgs
but they are not working (the image load but the image is not displaying doesn’t metter my tests)
here is the most basic which should work

<svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">
    <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">ßaD</text>
</svg>

I tryed generated svgs and those are working
Thanks

2

I was finaly able to make some thing “almost correct”
But it’s only working in TS3

image
image1048×96 17.5 KB

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50">
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="50%">TAU</text>
</svg>
3

So first of all, TeamSpeak on desktop and TeamSpeak on Android have different SVG rendering engines. Things that work on TeamSpeak for Desktop won’t always work on TeamSpeak for Android. TeamSpeak on iOS has no support for SVG icons at all. (It also doesn’t support @2x or @3x raster icons, so you’re stuck with gross pixely garbage.) I don’t have an Android device to test with, so I’m not sure what the exact limitations are for SVG icons on Android.

For platforms where SVG icons are fully supported, here’s the procedure I’ve found for producing SVGs that work as reliably as possible.

  1. Download and install the svgo tool somewhere on your machine.
  2. Run svgo on your image to clean up extraneous doctypes, redundant groups, and various other things that are not necessary.
  3. Ensure that the SVG has width and height attributes on the root <svg> element. If it does not, create them using the 3rd and 4th values from the viewbox attribute.
  4. Try uploading it to the TeamSpeak server to see if it works. If it doesn’t, it probably uses an unsupported feature like layer masks (lots of SVGs use this because it’s convenient, but TeamSpeak butchers it horribly).
1 Like
4

Thanks for the info’s
I didn’t know that there was a problem of compatibility about the OS that’s realy sad
About your program, it would not work with the project I was building.
In fact that I was building a webpage to autogenerate the teamspeak icons of our team Tags.
Which is not possible currelty if I don’t know what size will have the text.
On web it’s easy because the text is resizing to fit with the svg if no size is given.
and a tag with iii or www are not taking same with for example.
Btw the 2 images I shared wer both from windos but one from TS3 and the second from TS5 so even on the same OS the svg aren’t working the same way … ^^
Anyway I will wait some compatibility and try again later
Thanks

5

Just to be clear, I didn’t write svgo, I just found it to be useful for this task. Also, since it’s written in JavaScript and runs using Node, you may be able to port it to a browser context. I don’t have any experience with that sort of thing though, so your mileage may vary.