Can I use SVG to replace UI graphics with text on mobile devices?

Question

I'm new to this...

I have a lot of assets that are exported as jpeg when I digest them. But we often have to translate these assets and it ends up with me the developer composing the asset in code with the raster images (usually backgrounds with text on top). Then in code we apply the translation.

What I would like to develop is a way to design assets in illustrator and export them as SVG files to use in the app. Then in code I can target that SVG asset and change the text to the translated version before I render it.

Does anyone know of any pitfalls with this approach?

Does anyone know how to get a text item to be referenceable in SVG and easily changeable?

I have this code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 657.06">
<title>TestSVG</title>

<image width="400" height="600" xlink:href="iu.png"/>

<text transform="translate(7.38 639.06)" font-size="72" font-family="MyriadPro-Regular, Myriad Pro"><tspan letter-spacing="-0.07em">T</tspan><tspan x="30.67" y="0">est</tspan><tspan x="119.09" y="0" letter-spacing="-0.04em"> </tspan><tspan x="131.4" y="0" letter-spacing="-0.07em">T</tspan><tspan x="162.07" y="0" letter-spacing="0em">e</tspan><tspan x="197.93" y="0" letter-spacing="0.01em">x</tspan><tspan x="232.2" y="0">t</tspan></text>

Notice the text is built with Tspan etc. Is this required in SVG files produced by illustrator? or can I just tell illustrator to simplify this with some sort of text="Test Text" and FontSize=72?

Edit: because it's easier to change Text="Test" then to figure out a way to generate the Tspan stuff.

Answer 1

Sure, you can do this, but then you can not use any of the features in the adobe text engine. This means:

• No optical kerning
• No justified text
• No adjusting spacings in sentences
• etc.

Which is basically one of the big reasons why your average designer uses adobe software.

Answer 2

That would work.

• Give each text layer a name that conforms to XML naming conventions. This way you will get the same id for the exported SVG element.

• It should be fine to simply remove the <tspan> elements unless your designer cares alot about character spacing and other text properties set in Illustrator. If your designer is fine with this you could simply do the equivalent of getElementById("myTextElement").innerHTML = "Bonjour monde!" to translate the text.