Могу ли я использовать SVG для замены графики пользовательского интерфейса текстом на мобильных устройствах?

Я новичок в этом...

У меня есть много ресурсов, которые экспортируются в формате jpeg, когда я их перевариваю. Но нам часто приходится переводить эти ассеты, и в итоге я, разработчик, компоную ассет в коде с растровыми изображениями (обычно это фоны с текстом поверх). Затем в коде применяем перевод.

То, что я хотел бы разработать, — это способ проектирования ресурсов в иллюстраторе и экспорта их в виде файлов SVG для использования в приложении. Затем в коде я могу настроить таргетинг на этот ресурс SVG и изменить текст на переведенную версию перед его визуализацией.

Кто-нибудь знает какие-либо подводные камни с этим подходом?

Кто-нибудь знает, как сделать текстовый элемент доступным для ссылки в SVG и легко изменяемым?

У меня есть этот код:

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

Обратите внимание, что текст построен с помощью Tspan и т. д. Требуется ли это в файлах SVG, созданных иллюстратором? или я могу просто сказать иллюстратору упростить это с помощью какого-то text="Test Text"и FontSize=72?

Редактировать: потому что проще изменить Text="Test", чем найти способ генерировать Tspanматериал.

Ответы (2)

Конечно, вы можете это сделать, но тогда вы не сможете использовать ни одну из функций текстового движка Adobe. Это означает:

  • Нет оптического кернинга
  • Текст без выравнивания
  • Нет корректировки пробелов в предложениях
  • и т. д.

Это, по сути, одна из основных причин, по которой средний дизайнер использует программное обеспечение Adobe.

Это сработает.

  • Дайте каждому текстовому слою имя, соответствующее соглашениям об именах XML. Таким образом вы получите то же самое idдля экспортированного элемента SVG.

  • Можно просто удалить <tspan>элементы, если только ваш дизайнер не заботится о межсимвольном интервале и других свойствах текста, заданных в Illustrator. Если ваш дизайнер согласен с этим, вы можете просто сделать эквивалент getElementById("myTextElement").innerHTML = "Bonjour monde!"для перевода текста.