Зачем нужна конвертация из svg в png?

При подготовке контурных иконок для web-дизайна и дизайна мобильных приложений очень часто возникает необходимость преобразовать svg-формат в png, чтобы вставить иконку в png-формате в макет дизайна, например, Photoshop.

Существуют много разных способов конвертации форматов графических файлов из SVG в PNG с изменением цвета рисунка. Для этого в интернете много разных ресурсов. В данном случае мне надо было сконвертировать, найденную мной в интернете иконку в виде svg-файл, изменить цвет контура иконки и сконвертировать файл из svg в png формат.

Изменение цвета контурной иконки в svg

1. Открыть ресурс для редактирования картинок в svg-формате

Открыть сайт vectorpaint.yaks.co.nz с помощью которого можно менять цвет контурной иконки svg.

https://vectorpaint.yaks.co.nz

Использование данного он-лайн ресурса бесплатно. Можно использовать без регистрации.

2. Загрузить на ресурс файл

Для этого в верхнем горизонтальном меню выберите пункт меню «File» и далее в подменю «Open SVG».

3. Выбрать контур картинки

Выбрать мышкой объект на рабочем столе редактора в картинке. При выделении контура иконки она помечается маленькими квадратиками.

4. Поменять цвет контурной иконки

Поменять цвет с черного на белый, выбрав справа в разделе «Выбор цвета-FILL»  белый цвет. Цвет выбранной части фигуры должен поменяться.

5. Выгрузить файл в svg-формате

Данный онлайн ресурс позволяет сразу выгрузить в png-формате, но качество полученного файла png крайне низкое, поэтому лучше выгрузить в svg и далее выполнить конвертацию svg в png с помощью другого ресурса.

Для этого выбираем подпункт «Download» в пункте меню «File».

Конвертация из svg в png

1. Открыть онлайн-ресурс

https://photoshop.adobe.com/convert/

Использование данного сервиса бесплатно. Может потребоваться регистрация. Конвертация файлов происходит с наименьшими искажениями.

2. Добавляем файл картинки

Мы уже имеем файл в svg-формате. Нам нужно сконвертировать его в png-формат. Для добавления файла нажимаем кнопку «Добавить файл» и выбираем svg-файл на диске.

После открытия файла откроется окно онлайн-редактора Photoshop.

3. Конвертация и скачивание файла в jpg или png-формате

Запуск конвертации файла происходит при выборе операции «Скачать». Для этого в верхней части горизонтального меню нажимаем пункт «Скачать».

Открывается модальное окно «Выбора формата файла для скачивания».

4. Выбор формата файла картинки, получаемого на выходе

Указываем какой формат файла нам надо получить на выходе jpg или png. Далее нажимаем кнопку «Загрузка». После этого должен начаться процесс скачивания файла. Файл картинки загружается в папку «Загрузки».

6. Находим полученный файл картинки на компьютере

Открываем папку «Загрузки». Здесь должен находиться файл картинки сконвертированный из svg-формата в формат jpg или png.

Существуют и другие способы конвертации картинок из svg-формата в формат jpg или png. Это один из них.