Используем векторные изображения SVG в приложениях Android, или как убить фрагментацию экранов

Заказчик

WhisperArts.com

Задача

Оптимизировать процесс подготовки изображений для мобильных приложений

Достаточно долгое время мы занимаемся разработкой детских приложений под Android, постепенно постигая множество нюансов этой платформы. Есть одни грабли, которые подстерегают нас в каждом приложении, – это фрагментация экранов. Если делать одно изображение только под телефон маленького размера, то на планшете оно выглядит мягко говоря “не очень”. А если делать изображение высокого разрешения для планшетов и пытаться использовать его на телефонах, то с очень большой вероятность приложение вывалится с OutOfMemory.

Примеры отображения изображений на мобильном устройстве: первое — SVG (10 Кб), второе — PNG (22 Кб). Второе изображение имеет размытый контур и ступенчатый градиент


Всё это время приходилось готовить несколько экземляров одного и того же изображения под разные экраны (меняется или добавляется одно изображение — вырежи минимум 4 штуки разных размеров). В свою очередь огромное количество картинок влияет на размер приложения. Еще сильнее облака сгущает новый монстр Galaxy Nexus 10 с безумным разрешением 2560х1600. Представляете, сколько будет весить изображение хорошего качества для такого экрана?

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

Сказано — сделано. Мы решили что пора пробовать внедрять векторные изображений в формате SVG в наши приложения на Android.
Результатом внедрения и использования мы довольны.

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

Плюсы:

• Один огромный плюс, из которого следуют все остальные, — это одна векторная картинка.
  • Так как картинка векторная, она отлично отображается на всех размерах экранов.
  • Размер SVG-картинок мал.
  • Одна картинка используется несколько раз для разных разрешений.
  • Сокращается процесс подготовки изображений для приложения.

Минусы:

• Картинки масштабируются только пропорционально.
• Не поддерживается прозрачность фильтров, применяемых к озображению.
• Графику нужно упрощать — чем больше векторых элементов, тем больше весит файл
• Нежелательно использовать тени и свечения, так как это в разы увеличивает размер SVG-файлов.

В результате экспериментов с SVG родилось приложение для детей “Учим формы и фигуры”. Ознакомится с приложеним можно в Google Play:


Количество получившихся изображений:

• PNG — 3 (сплэшскрин и 2 фона для меню);
• SVG-элементов — 97;
• Размер приложения 3,5 Мб.

В сравнении с почти похожим по функционалу нашим приложением “Учим цвета” (размер которого 8 Мб) выигрыш более 50% налицо.

Для себя мы приняли решение использовать SVG-изображения в наших приложениях, так как это существенно ускоряет процесс разработки и адаптации картинок под разные разрешения экранов, а также существенно уменьшает вес приложения.