Как справиться с медленным рендерингом SVG-изображений? - PullRequest
Новая
       27

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

0 голосов
/ 09 ноября 2018

Мы создаем мобильное приложение, которое использует встроенное веб-представление для отображения руководства оператора, в котором много технических иллюстраций. Иллюстрации взяты из векторных файлов EPS, которые мы конвертируем в SVG для получения четких и масштабируемых изображений.

К сожалению, у нас есть несколько случаев, когда изображения становятся очень большими и медленными. Например, у нас есть одно изображение SVG размером 4,5 МБ, состоящее из 23000 отдельных путей. Это изображение отображается почти мгновенно на iOS, но на современном телефоне Android требуется около 4 секунд, что значительно ухудшает пользовательский интерфейс.

У нас есть тысячи руководств оператора на десятках языков, поэтому мы не можем на самом деле выполнить ручную настройку отдельных изображений. С этим ограничением, какие из лучших стратегий работают с медленным рендерингом SVG-изображений?

1 Ответ

0 голосов
/ 09 ноября 2018

Если SVG-файлы состоят только из контуров и фигур одного сплошного цвета, единственный вариант, который у вас есть, - попытаться как-то упростить SVG. Объединять фигуры, выравнивать группы и т. Д.

Например, если два пути имеют одинаковый цвет, преобразование, непрозрачность и т. Д., Вы можете объединить их данные пути. Это делается путем удаления одного из путей и простого объединения данных пути обоих путей.

Вот пример с двумя путями, каждый из которых вложен в группу: 

<g fill="#1b8f00">
    <path d="M80 80 A45 45,0,0,0,125 125L125 80Z" />
</g>
<g fill="#1b8f00">
    <path d="M30 20 A25 25,0,1,0,45 25L45 30Z" />
</g>

Перемещая атрибут fill в путь и объединяя данные пути d обоих путей, это можно упростить до: 

<path color="#1b8f00" d="M80 80 A45 45,0,0,0,125 125L125 80ZM30 20 A25 25,0,1,0,45 25L45 30Z" />

Если ваш SVG использует фильтры и маски, есть некоторые другие вещи, которые вы можете попробовать. Но обычно iOS в этих случаях намного медленнее, чем Android, поэтому, похоже, это не относится к вашим изображениям.

...