Как открыть и редактировать SVG файлы в Windows

Векторная графика (SVG) - это веб-дружественный формат файла, используемый для отображения 2D графики, векторных иллюстраций, графиков и т. д. Хотя он отображается как изображение, на самом деле под ним лежит код XML, который определяет кривые и линии. В Windows вы можете легко просматривать SVG файлы в браузере, но редактировать их с помощью обычного редактора изображений невозможно. В этом руководстве мы покажем вам, как открыть и редактировать SVG файл в Windows.

Открытие SVG файла с использованием браузера

Мы можем открыть SVG файл в браузере, дважды щелкнув по нему или перетащив его в наш предпочтительный браузер.

Это самый простой способ открыть любой SVG файл. Однако мы не можем редактировать изображение таким способом.

Просмотр SVG файла в Проводнике

Вы можете открывать SVG файлы, включив функцию предварительного просмотра SVG в Microsoft PowerToys. Для этого нужно загрузить и установить PowerToys с официальной страницы PowerToys, Microsoft Store или менеджера пакетов Windows (winget).

Например, мы используем менеджер пакетов Winget в PowerShell для установки PowerToys:

winget install --id Microsoft.PowerToys --source winget

После установки вы можете открыть PowerToys из меню «Пуск». В настройках PowerToys перейдите в раздел «Дополнения для Проводника» и включите предварительный просмотр «Векторной графики» в разделе «Область предварительного просмотра»:

Вы также можете включить миниатюры SVG, чтобы видеть их в виде значков, а не только в области предварительного просмотра:

Теперь откройте Проводник, нажмите Alt + P, чтобы включить область предварительного просмотра, и выберите любой SVG файл, чтобы увидеть предварительный просмотр справа.

Таким образом, вы можете просматривать миниатюры и детализированные предварительные просмотры в проводнике без необходимости в дополнительном программном обеспечении.

Редактирование SVG файла с использованием текстового редактора

Поскольку SVG в основном являются XML файлами, вы можете легко редактировать их с помощью текстового редактора. Более того, вы можете использовать CSS для стилизации SVG различными способами, даже добавлять анимации. Этого не можно сделать с обычными форматами изображений, такими как JPG или PNG.

Щелкните правой кнопкой мыши по SVG файлу, наведите на Открыть с помощью и выберите редактор, например, Блокнот:

Когда вы откроете SVG файл в текстовом редакторе, вы увидите код на основе XML вместо самого изображения.

Предположим, мы хотим изменить цвет заливки данного SVG файла на черный. В этом случае мы можем отредактировать атрибут fill следующим образом:

Сохраните код в текстовом файле и откройте файл снова, вы увидите обновленный результат, что-то типа этого:

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

Редактирование SVG файла с использованием векторного редактора

Современные инструменты для векторного редактирования, будь то настольные, такие как Adobe Illustrator и Inkscape, или онлайн-платформы, такие как Figma и Canva, могут открывать и редактировать SVG файлы.

Например, мы используем редактор SVG Canva, чтобы показать вам, как легко вы можете редактировать SVG изображение с помощью онлайн-инструмента. Сначала получите доступ к редактору SVG Canva с официального сайта, а затем нажмите кнопку Редактировать SVG:

Нажмите кнопку Загрузить файлы и выберите SVG файл, который вы хотите редактировать:

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

Если вам нужны основные правки, вы можете воспользоваться редактором SVG Canva. Тем не менее, я рекомендую использовать более продвинутые инструменты, такие как Adobe Illustrator или Inkscape, чтобы редактировать сложные векторные группы или пути.

Конвертация файлов в формат SVG и обратно

Вы можете конвертировать SVG файл в другие форматы или из других форматов изображений в SVG с помощью настольных или онлайн инструментов редактирования изображений.

При конвертации в SVG, особенно из PNG или JPG, онлайн-инструменты могут испытывать трудности с сложными визуализациями. Вы можете заметить упрощенные формы или отсутствующие цвета, поскольку растровые изображения преобразуются в векторную графику.

Предположим, мы хотим конвертировать следующий PNG файл в SVG:

Давайте воспользуемся онлайн-редактором, таким как Convertio, чтобы конвертировать PNG изображение в SVG. Для этого загрузите файл для конвертации, затем выберите желаемый формат вывода. Наконец, нажмите кнопку Конвертировать, чтобы преобразовать файл в выбранный формат:

После конвертации файла вы можете загрузить его, нажав соответствующую кнопку:

Теперь откройте конвертированный файл, чтобы увидеть конечный результат:

Выход показывает значительное снижение качества изображения.

С другой стороны, конвертация из SVG в такие форматы, как PNG или JPG, обычно более точна и хорошо работает с большинством инструментов. Предположим, мы хотим конвертировать следующее SVG изображение в JPG:

Давайте воспользуемся Convertio для конвертации выбранного SVG файла в JPG:

Скачайте изображение и откройте его, чтобы проанализировать результат. Выход показывает, что конвертация SVG в JPG не влияет на качество изображения:

Если вам нужно работать с растровыми изображениями на мобильном устройстве, вы также можете редактировать фотографии с помощью Photoshop для Android.