¿Puedo usar SVG para reemplazar gráficos de interfaz de usuario con texto en dispositivos móviles?

Soy nuevo en esto...

Tengo muchos activos que se exportan como jpeg cuando los digiero. Pero a menudo tenemos que traducir estos activos y termina conmigo, el desarrollador, componiendo el activo en código con las imágenes rasterizadas (generalmente fondos con texto en la parte superior). Luego en código aplicamos la traducción.

Lo que me gustaría desarrollar es una forma de diseñar activos en Illustrator y exportarlos como archivos SVG para usar en la aplicación. Luego, en el código, puedo apuntar a ese activo SVG y cambiar el texto a la versión traducida antes de renderizarlo.

¿Alguien sabe de alguna trampa con este enfoque?

¿Alguien sabe cómo hacer que un elemento de texto sea referenciable en SVG y fácilmente modificable?

tengo este codigo:

<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>

Observe que el texto está construido con Tspan, etc. ¿Se requiere esto en los archivos SVG producidos por Illustrator? ¿O puedo simplemente decirle a Illustrator que simplifique esto con algún tipo de text="Test Text"y FontSize=72?

Editar: porque es más fácil cambiar Text="Test"que encontrar una forma de generar las Tspancosas.

Respuestas (2)

Claro, puede hacer esto, pero entonces no puede usar ninguna de las funciones en el motor de texto de Adobe. Esto significa:

  • Sin interletraje óptico
  • Sin texto justificado
  • Sin ajustar los espacios en las oraciones
  • etc.

Que es básicamente una de las grandes razones por las que su diseñador promedio usa el software de Adobe.

Eso funcionaria.

  • Asigne a cada capa de texto un nombre que se ajuste a las convenciones de nomenclatura XML. De esta forma obtendrá lo mismo idpara el elemento SVG exportado.

  • Debería estar bien simplemente eliminar los <tspan>elementos a menos que su diseñador se preocupe mucho por el espaciado entre caracteres y otras propiedades de texto establecidas en Illustrator. Si su diseñador está de acuerdo con esto, simplemente podría hacer el equivalente getElementById("myTextElement").innerHTML = "Bonjour monde!"a traducir el texto.