Как редактировать SVG (и почему с чистым файлом это намного проще)

SVG можно редактировать двумя способами. Можно открыть его в визуальном редакторе и нажимать на фигуры, чтобы перекрасить, изменить размер или передвинуть их. А можно открыть код и править файл вручную, потому что SVG на самом деле просто текстовый файл. Большинству нужен первый путь: обычно заменить цвет или изменить размер иконки, а визуальный редактор справляется с этим за секунды.

Но есть деталь, о которой почти не говорят в инструкциях: насколько все это будет легко, зависит от того, как был сделан SVG. Чистый файл с несколькими аккуратными фигурами редактируется за секунды. Грязный файл, вроде тех, что выдают быстрые конвертеры, может содержать тысячи лишних точек, а один цвет в нем бывает разбит на сотни осколков. И тогда совет "просто нажмите на фигуру и перекрасьте ее" перестает работать. В этом руководстве разбираем оба способа редактирования и то, как понять, какой файл у вас в руках.

Коротко

• Два способа редактирования: визуально в редакторе (перекрасить, изменить размер, форму) или прямо в SVG-коде (это обычный текст).
• Бесплатный визуальный редактор: Inkscape. Профессиональный: Illustrator. В браузере: Figma или бесплатный онлайн-редактор SVG. Код: VS Code или любой текстовый редактор.
• Самая частая задача, перекрашивание: выберите фигуру и измените ее fill. На чистом файле это быстро, на фрагментированном - мучительно.
• Редактируйте код, когда нужно сохранить имена классов и ID, изменить viewBox или быстро поправить мелочь без запуска приложения.
• Если не получается выбрать нужную фигуру, проблема в файле, а не в редакторе. Часто настоящим решением будет более чистая конвертация.

Сначала разберемся, что внутри SVG

SVG можно редактировать благодаря его устройству: это набор фигур, описанных математически, записанный обычным текстом (точнее, XML). Круг хранится как центр и радиус, логотип - как серия контуров, у каждого из которых есть свой цвет заливки. (Если вы только знакомитесь с векторами, вот подробное объяснение.)

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

Перед началом проверьте одну вещь: откройте SVG и попробуйте нажать на одну отдельную фигуру. Если ее можно выбрать и переместить отдельно, это настоящий редактируемый вектор. Если все изображение выбирается одним блоком и пикселизируется при увеличении, скорее всего, это растровое изображение, завернутое в файл .svg, то есть "псевдовектор", который по-настоящему редактировать нельзя. Никакой редактор это не исправит; файл сначала нужно правильно конвертировать.

Два способа редактировать SVG и когда использовать каждый

Вы хотите...	Лучший способ
Перекрасить, изменить размер или передвинуть фигуры	Визуальный редактор (Inkscape, Illustrator, Figma)
Отредактировать текст или быстро заменить несколько цветов	Визуальный редактор или код для разовых правок
Сохранить имена классов / ID для CSS или анимации	Редактировать код напрямую
Изменить viewBox, размеры или hex-значение	Редактировать код напрямую
Перерисовать или вручную изменить форму контуров	Визуальный редактор

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

Визуальное редактирование SVG

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

Выберите редактор

• Inkscape - бесплатный редактор с открытым исходным кодом для Mac, Windows и Linux. Это обычный ответ на вопрос "чем редактировать SVG", и он его заслуживает.
• Adobe Illustrator - платный профессиональный стандарт. Если он у вас уже есть, он дает больше всего контроля.
• Figma работает в браузере и хорошо справляется с легкими правками и перекрашиванием, поэтому к ней часто обращаются продуктовые команды.
• Бесплатные онлайн-редакторы вроде Boxy SVG или быстрых веб-редакторов SVG подходят для небольших изменений без установки программ.

Внесите правку

Шаги везде примерно одинаковые:

1. Откройте файл в редакторе (File → Open или перетащите его в окно).
2. Разгруппируйте, если нужно. Конвертированные и экспортированные SVG часто приходят как одна заблокированная группа. Выделите все и выполните Ungroup (в Illustrator и Inkscape), чтобы добраться до отдельных фигур.
3. Выберите нужную фигуру инструментом выбора или прямого выбора.
4. Измените ее. Задайте новый цвет заливки, потяните маркер, чтобы изменить размер, передвиньте фигуру, отредактируйте текст или удалите ненужную часть.
5. Сохраните или экспортируйте как SVG, когда закончите.

Самая частая правка: изменение цветов

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

И ровно здесь грязный файл начинает разваливаться на части. Об этом следующий раздел.

Редактирование SVG-кода напрямую

Поскольку SVG - это текст, его можно открыть в VS Code, Notepad или любом текстовом редакторе и изменить вручную. Это путь разработчика, и для некоторых задач он быстрее и надежнее любого визуального приложения:

• Перекрашивание: найдите у фигуры fill="#3b82f6" и замените hex-значение.
• Изменение размера холста: отредактируйте width, height или viewBox.
• Сохранение ваших привязок: это главное. Визуальные редакторы вроде Illustrator часто переписывают разметку при сохранении, переименовывая или удаляя атрибуты class и id, от которых зависят ваши CSS или JavaScript. Если SVG подключен к стилям или анимации, правка кода вручную - единственный надежный способ сохранить эти привязки.

Компромисс простой: редактирование кода отлично подходит для маленьких точечных изменений и всего, что связано с классами, ID или анимацией. Но это неподходящий инструмент для изменения формы кривой или перекрашивания сложной иллюстрации. Для этого нужны визуальные редакторы.

Почему некоторые SVG ужасно редактируются (и как это исправить)

Вот чего страницы инструментов обычно не говорят: проблема редко в редакторе. Проблема в файле.

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

Откройте грязный SVG, обычно автоматически трассированный быстрым бесплатным конвертером, и та же правка становится мучительной:

• Один цвет разбит на сотни крошечных осколков, поэтому нет одной "синей фигуры", на которую можно нажать. Их сотни.
• Гладкие кривые набиты тысячами опорных точек, поэтому менять форму почти невозможно, а редактор тормозит. (Это подробно описано в материале про проблему слишком большого числа узлов.)
• Лишние фоновые прямоугольники и обрезанные края мешают работе.

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

Как это выглядит в PerfectVector

Проще всего редактировать чистый SVG, и именно эту часть PerfectVector делает правильно. Он пересобирает изображение как чистые контуры с малым числом узлов и сохраняет каждый цвет как отдельную редактируемую фигуру, поэтому когда вы открываете результат в Illustrator, Figma или Inkscape, можно выбирать и перекрашивать элементы именно так, как обещают инструкции.

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

Перекрашивайте по цвету, а не по контурам

Короткий чек-лист перед редактированием

• Убедитесь, что это настоящий вектор. Нажмите на отдельную фигуру. Если она выбирается сама по себе, все в порядке. Если все изображение выбирается одним блоком и размывается при увеличении, сначала конвертируйте его в настоящий SVG.
• Сохраните оригинал. Сделайте копию перед началом, особенно если будете править код.
• Выберите способ. Визуальный редактор - для фигур и цветов; код - для классов, ID, viewBox и небольших точечных правок.
• Разгруппируйте, если файл пришел как одна заблокированная группа.
• Если не получается выбрать нужное, перестаньте с ним бороться. Файл слишком фрагментирован, и более чистая конвертация сэкономит больше времени, чем ручная чистка.

FAQ

Как редактировать SVG бесплатно? Используйте Inkscape - бесплатный редактор с открытым исходным кодом для Mac, Windows и Linux, который подходит для полноценного визуального редактирования. Для быстрых правок можно взять бесплатный онлайн-редактор SVG в браузере или открыть файл в текстовом редакторе вроде VS Code и изменить код напрямую. Все три варианта ничего не стоят.

Как изменить цвет SVG? В визуальном редакторе выберите фигуру и задайте новый цвет заливки. В коде найдите значение fill у фигуры (например, fill="#3b82f6") и измените hex. Если один цвет разбит на множество фигур, перекрашивайте по цвету, а не нажимайте на каждый фрагмент, используя инструмент, который группирует цвета за вас.

Можно ли редактировать SVG в VS Code? Да. SVG - это XML-текст, поэтому VS Code или любой текстовый редактор открывает его без проблем. Это правильный путь для изменения hex-цветов, viewBox или размеров, а также для сохранения атрибутов class и id для CSS или анимации. Но он не подходит для ручного изменения формы кривых.

Почему я не могу выбрать отдельные фигуры в своем SVG? Обычно причина одна из двух. Фигуры сгруппированы, поэтому сначала выделите все и разгруппируйте. Или файл - это растровое изображение, завернутое в .svg, где нет отдельных фигур для выбора. Если оно пикселизируется при увеличении, это второй случай, и его нужно конвертировать в настоящий вектор.

Можно ли редактировать SVG в Canva? Да, для базовых правок. Canva позволяет перекрашивать, менять размер и положение SVG, и этого достаточно для большинства легких задач. Для точного редактирования контуров, разгруппировки сложных фигур или правок на уровне кода используйте Inkscape, Illustrator или текстовый редактор.

Как редактировать SVG на Windows или Mac? На обеих системах работают одни и те же инструменты. Inkscape есть для Windows, Mac и Linux; Figma и онлайн-редакторы работают в любом браузере; VS Code редактирует код и в Windows, и на Mac. Для разных операционных систем не нужно разное ПО.

---

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