Главная » Adobe Photoshop, Веб-дизайн, Уроки » Экспорт изображений в SVG для мобильных приложений

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

Обновлено: 13.02.2022

Всем привет! Сегодня речь пойдет снова о SVG, а точнее об экспорте изображений для мобильных приложений в формат SVG. Почему данный формат так важен и зачем его использовать? Как и с помощью каких программ выполнить экспорт изображения в SVGтак, чтобы мобильное приложение работало быстро и оптимально? Об этом и многом другом, вы можете узнать в моей новой статье.

Я уже поднимала вопрос о том, как выполнить экспорт изображения в формат SVG из Photoshop.

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


Тот, кто интересуется темой разработки мобильных приложений, знает, что разные устройства, под которые пишется приложение (смартфоны, планшеты…) имеют разное разрешение экрана.


Соответственно изображения, задействованные в приложении, нужно сохранять так, чтобы на всех устройствах они выглядели корректно. Это достигается путем сохранения одной и той же картинки под разные разрешения (так называемые плотности). Причем, как для устройств Ios, так и для Android. В том случае, если вы сохраняете изображения в формате PNG.

Процесс очень трудоемкий, если выполнять его вручную. Конечно, в том же самом Photoshop, разработаны плагины для автоматизации экспорта изображений в разные варианты плотности. А уж о Sketch или AdobeXD и говорить нечего. Там это изначально предусмотрено.

Почему нельзя использовать сразу для всех устройств изображение, соответствующее самой высокой плотности?

Да потому что устройство с маленьким разрешением – может не справиться с таким приложением.


И тут на выручку приходит формат SVG! Это масштабируемый векторный формат, в котором изображение создается посредством выполнения кода и может подстраиваться под любой формат экрана и не терять при этом качество.


Работа мобильного приложения с изображениями в формате SVG будет более оптимальной, а приложение меньше весить!

Чуете куда я веду?

Именно! Такое пройдет в том случае, если дизайн приложения выполнен в векторном виде. Но учитывая, что сейчас единовластно господствует Flat дизайн и Material дизайн, наличие растровых иконок и элементов дизайна в мобильном приложении является маловероятным.

Если вы создавали дизайн мобильного приложения в одной из последних версий Photoshop, то там уже предусмотрена функция сохранения в SVG. Файл – Экспортировать – Экспортировать Как

Тогда код SVG файла, вот такого, например, изображения, будет выглядеть следующим образом (приведен фрагмент):

Согласитесь, код выглядит прилично и его смело можно вставлять в приложение, и файл весит примерно 5 кб!

Если вы используете более старую версию Photoshop, например, CS5, то вы обнаружите, что там нет такого удобного экспорта в SVG. Вы можете воспользоваться приемом, который я описываю в статье Экспорт из Photoshopв SVG, но тогда обнаружите, что сам файл будет весить уже 48 кб (против 5 в первом случае) а код файла SVG представляет что-то страшное. Что-то, что программист откажется вставлять в свое приложение (и, кстати говоря, не факт, что этот код будет работать).

В таком же положении оказалась и я, когда рисовала дизайн приложений Мой тренер и Калькулятор выгоды. Тогда еще у меня не было AdobePhotoshopCC и о Sketch я ничего не знала. Да и переносить туда уже готовый макет из Photoshop было бы слишком нудно.

Тогда мне посоветовали воспользоваться программой VectorMagicЭта программа преобразует любое изображение в векторный формат. Действительно очень крутая программа (не реклама). Правда она стоит денег, но, если задача преобразования растра в вектор переда вами маячит как никогда – это выход и очень хороший выход.

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

Чтобы не терять много времени, я сохранила в PNG все изображения, которые мне нужно было экспортировать в SVG.Загрузила их в программу и уже там экспортировала в SVG. Для сравнения, размер файла 11 кб, код выглядит, практически так же, как и в случае экспорта из Sketch или нового Photoshop. С AdobeXD я такой возможности еще не тестировала.

Надеюсь, что помогла тем, кто столкнулся с такой же проблемой экспорта изображений для мобильного приложения в SVG, как и я.  Хотя, уверена, что сейчас уже можно экспортировать свой макет из Photoshop в AdobeXD

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях  

и мы обязательно опубликуем для вас еще больше полезных уроков!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *