Александр
Чтобы открыть SVG и посмотреть изображение, обычно достаточно перетащить файл в окно браузера. Для изменения контуров и цветов нужен векторный редактор; для подготовки PNG — экспорт или растеризация. Выбор зависит от того, что вы хотите получить: просмотр, редактируемый макет или готовую картинку.
SVG — формат на основе XML. Он может содержать векторные фигуры, текст и встроенные растровые изображения. Векторные контуры сохраняют чёткость при увеличении, а встроенная фотография остаётся ограничена своим разрешением.
Ниже разберём четыре способа открытия файла. Если важнее выбрать программу для правки иконок и иллюстраций, сравните SVG-редакторы для разных задач.
1. Графические редакторы: открыть и изменить SVG
Векторный редактор подходит, когда нужно изменить заливку, обводку или форму объекта. После импорта найдите нужный слой: изображение может состоять из отдельных контуров, вложенных групп или растрового фрагмента. От этого зависит, что получится отредактировать.
Pixso: использовать SVG в макете интерфейса
Pixso позволяет импортировать SVG в дизайн-файл и работать с ним вместе с остальным интерфейсом. Это удобно, когда иконку или карту нужно расположить рядом с текстом, кнопками и другими элементами.
- Откройте дизайн-файл и добавьте SVG на холст. Сохраните исходный файл отдельно, чтобы можно было сравнить результат.
- Выберите объект в панели слоёв. Если это группа, раскройте её и найдите контур, цвет которого хотите изменить.
- Измените заливку или обводку выбранного векторного объекта. Если выбран растровый фрагмент, изменение его пикселей не превратится в редактирование векторных узлов.
- Выберите нужный объект или фрейм для экспорта. SVG сохранит векторную структуру поддерживаемых элементов, PNG даст растровое изображение заданного размера.
- Откройте экспортированный файл и сравните контуры, текст, прозрачность и границы с макетом. Особенно внимательно проверьте обрезку и шрифты.
Импорт и экспорт SVG указаны в справке Pixso о форматах файлов (на английском). Сложные фильтры, внешние изображения и шрифты могут отображаться по-разному в редакторе и браузере: проверяйте именно те элементы, которые есть в вашем файле.
Для первого макета можно выбрать графику в сообществе Pixso и затем проверить её структуру в редакторе.
Посмотреть SVG-ресурсы в сообществе Pixso
Inkscape: редактировать векторную графику на компьютере
Inkscape — векторный редактор с открытым исходным кодом, для которого SVG является основным форматом. Откройте файл через меню «Файл» → «Открыть», выберите объект и при необходимости перейдите к редактированию узлов. Сохранение копии позволяет оставить исходный вариант нетронутым.
GIMP: открыть SVG как растровое изображение
GIMP подходит, когда вектор нужно превратить в картинку для растровой обработки. При открытии SVG задайте размер изображения: дальнейшее увеличение растрового результата может сделать края размытыми. Для сохранения редактируемых контуров используйте отдельный импорт путей. Эти два способа описаны в документации GIMP (на английском).
2. Веб-браузеры: быстро посмотреть SVG
Перетащите локальный SVG-файл в окно Google Chrome, Mozilla Firefox или другого современного браузера. Можно также вызвать команду «Открыть файл» и выбрать SVG. Браузер покажет изображение без установки векторного редактора.
Так удобно проверить общий вид, прозрачность и границы рисунка. Сам просмотр не даёт инструментов для перетаскивания узлов, изменения отдельных объектов и сохранения результата как редактируемого макета. Для такой задачи вернитесь к векторному редактору.
Если вместо рисунка появился текст, проверьте, действительно ли файл имеет расширение .svg и содержит корректную SVG-разметку. Если рисунок виден, но выглядит иначе, проверьте шрифты и внешние ресурсы. Формат и способы его отображения описаны в документации MDN (на английском).
3. Просмотр в Windows и macOS
Для разового просмотра на обеих системах проще использовать браузер. Возможности встроенных просмотрщиков зависят от приложения и версии системы, поэтому не стоит считать, что любой просмотрщик фотографий откроет SVG.
- Windows: для предварительного просмотра в Проводнике можно включить поддержку SVG в PowerToys File Explorer add-ons (документация на английском). Это просмотр, а не редактор контуров.
- macOS: сначала попробуйте «Быстрый просмотр» для выбранного файла. Если содержимое не отображается, откройте SVG в Safari или другом браузере.
4. Редакторы кода: изменить разметку SVG
Sublime Text и Visual Studio Code открывают SVG как текстовый файл. Этот путь подходит, если нужно найти конкретный атрибут, проверить ссылку на изображение или поправить разметку. Он требует понимания структуры SVG: случайное удаление закрывающего тега может нарушить отображение.
В Visual Studio Code просмотр изображения можно организовать с подходящим расширением. После изменения кода сохраните копию SVG и откройте её в браузере; наличие подсветки синтаксиса само по себе не подтверждает правильный вид рисунка.
Почему SVG открылся, но его нельзя изменить?
Вы открыли файл в браузере. Изображение отображается, но браузер не становится векторным редактором. Откройте файл в программе для правки контуров.
Внутри SVG находится растровая картинка. Расширение файла не гарантирует, что все его элементы состоят из узлов. Для изменения пикселей нужен растровый редактор; для редактируемой геометрии — исходные векторные объекты.
Текст превратился в контуры. Его форма сохранена, но заменить слова обычным текстовым инструментом уже не получится. Попросите исходник с текстовыми слоями либо наберите текст заново с подходящим шрифтом.
Нужен PNG, а не SVG. Экспортируйте изображение в нужном размере. Подробности — в руководстве по преобразованию SVG в PNG.
Если SVG должен стать частью интерфейса, откройте его в Pixso, измените один нужный элемент и проверьте результат в контексте макета.
