Android Vector Drawable <text> not support, <tspan> not support

Question

In icon.svg
ERROR@ line 9 <text> is not supported
ERROR@ line 10 <tspan> is not supported

How to export this type of svg to vector drawable? Is this even possible? Or should I look for a new svg?

Solution 1

When I had the same issue, I used the free online converter CloudConvert, to convert my SVG to another SVG, with marking their setting Text To Path to yes, where the converted SVG got opened in my Android Studio like a charm.

Solution 2

In Adobe XD

1. Select text
2. Go to Object -> Path -> Convert to Path.

OR Select text and CTRL + 8 for Windows or ⌘ + 8 for macOS

Solution 3

If you are using Sketch select the text and do "Convert to Outlines" will work.

Solution 4

If you are using adobe illustrator, Set 'font' to 'convert to outlines'...worked for me

Solution 5

Well, this method is perfect for splash screen logo where you've got both image + text.

When you have got both image + text and you export them as SVG file and import in android drawable as vector then only image shows up with no text.

If you're struggling with the same issue then here's a way to add a text into your SVG file. Here's how:

1. Firstly, you need have Adobe illustrator installed in your machine.
2. Next, when you'll add a text + image or simply a text and done with all the customizations then select all and go to Objects > Expand > ok.
3. That's all. Now simply export your media as SVG file and you are ready to go.

View more solutions

Comments

[Arka Prava Basu]

The svg was not created properly. Unfortunately I do not have the details, have to contact the designer who resolved the issue for me :P. Will update when I can.

[ir2pid]

how did he fix it ?

[ir2pid]

hmm, so my designer said he converted all texts to curves.

[Arka Prava Basu]

She converted all vector images into outline(s) and this problem was resolved.

[kojot]

I had the same problem with the svg exported by Adobe XD. In Adobe XD I needed to right-click on the text and select Path -> Convert to Path option.

[AbdelHady]

You need to convert text to paths, I've just tried it & it works fine, I voted for re-opening this question to put a detailed answer because this question is really different from the mentioned duplicate which is about <defs>!

[AbdelHady]

@karel, great, thanks for your mention, I've just added my answer

[hassan moradnezhad]

the font used in SVG file lost after converting

[AbdelHady]

@hassanmoradnezhad, everything went fine with me, but for your custom font, may be you will have to export the SVG as path using the same design app that it was created by in the first place

[KKKKK]

@AbdelHady I cant find the setting "Text To Path to yes", can you tell me where is? thanks

[AbdelHady]

@KKKKK choose first the conversion from svg to svg, and then you will find it in the "options"